前端UI组件设计系统【免费下载链接】semi-designA modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.Provide 3000 Design Tokens, easy to build your design system. Make Semi Design to Any Design.‍ Design to Code in one click项目地址https://gitcode.com/gh_mirrors/se/semi-design点击查看免费下载Semi Design 的 Icon 图标组件是一套基于 React 与 SVG 的语义化矢量图形体系默认图标集douyinfe/semi-icons内置面性、线性、AI 三套共数百个图标另有彩色实验室图标集douyinfe/semi-icons-lab供按需安装。本文基于 官方 Icon 文档 并结合 semi-icons 与 semi-ui 源码系统讲解图标引入、尺寸旋转、颜色定制、双色/多色着色、自定义图标与无障碍实践帮助你在业务中准确、高效地使用这套图标体系。一、图标体系总览Semi Design 的图标分为两个 npm 包职责各不相同包名内容是否需要单独安装可改色douyinfe/semi-icons默认图标集包含面性filled、线性stroked、AI三套图标否Semi 默认依赖面性、线性及 AI 单色图标通过 CSScolor改色AI 双色/多色图标通过fill改色douyinfe/semi-icons-lab彩色图标集多为组件/场景主题图标是不可改色三条版本相关的硬性约束需要留意AI 图标自 v2.86.0 起提供面性、线性图标则一直随主包发布douyinfe/semi-icons-lab图标集于 v2.48 之后提供使用时需单独安装双色、多色 AI 图标自带默认配色但可通过fill属性覆盖详见下文双色与多色图标。从源码看默认图标集中每个图标都是一个独立的 React 组件文件全部位于 packages/semi-icons/src/icons 目录例如IconHome.tsx、IconAIBellLevel3.tsx彩色 lab 图标则位于 packages/semi-icons-lab/src/icons。仓库中 semi-icons 的 package.json 当前版本为 2.103.0声明了main: lib/cjs/index.js、module: lib/es/index.js并按 tree-shaking 友好的方式按组件导出这意味着你可以放心使用具名导入未用到的图标不会打进最终产物。二、安装与引入基础引入douyinfe/semi-icons是默认图标集引入方式如下import Icon, { IconHome } from douyinfe/semi-icons;若需要彩色 lab 图标先单独安装douyinfe/semi-icons-lab再按需引入import { IconAvatar, IconCard } from douyinfe/semi-icons-lab;从 semi-ui 引入 Icon 外壳组件Icon这个外壳组件同样可以从douyinfe/semi-ui中直接导出使用自定义图标场景常用import { Icon } from douyinfe/semi-ui;其实现位于 packages/semi-ui/icons/index.tsx本质是douyinfe/semi-icons中 Icon 组件的再导出同时导出了IconProps、IconSize类型。源码层面图标是如何被包装的每个图标组件如IconHome都经过 Icon.tsx 中convertIcon工厂函数的包装const convertIcon (Svg: ComponentType, iconType: string) { const InnerIcon React.forwardRefHTMLSpanElement, OmitIconProps, svg | type((props, ref) Icon svg{React.createElement(Svg)} type{iconType} ref{ref as any} {...props} /); // ts-ignore used to judge whether it is a semi-icon in semi-ui // builtin icon case InnerIcon.elementType Icon; return InnerIcon; };这里有两个值得注意的实现细节每个内置图标会把 SVG 组件与一个type即图标文件名如ai_wand_level_2绑定最终渲染为一个span包裹的 SVG包装后的组件上挂有elementType Icon标记供 Semi UI 内部判断这是一个 Semi 图标使用自定义图标场景同样会被标记这解释了为什么自定义 SVG 也能无缝接入 Icon 组件体系。三、基础使用从douyinfe/semi-icons中直接引入图标组件并渲染即可import React from react; import { IconHome } from douyinfe/semi-icons; () IconHome /;渲染结果是一个带semi-icon类名的span内部包裹svg。所有内置图标都使用width1em/height1em的 SVG因此图标天然基于字体大小缩放这也是后文尺寸章节的底层原理。四、尺寸体系五档预设尺寸 inheritIcon 组件封装了size属性相比直接调font-size更语义化取值与像素换算如下size 取值像素尺寸说明extra-small8 × 8超小small12 × 12小default16 × 16默认值large20 × 20大extra-large24 × 24超大inherit继承当前上下文字体大小常用于与文本行内混排提示本质上你随时可以直接修改外层容器的font-size来改变图标大小size属性只是把这一操作封装得更直观。源码实现尺寸映射逻辑见 Icon.tsxsize会被转换为对应的 CSS 类名如semi-icon-extra-small再在 icons.scss 中通过font-size控制实际大小.#{$prefix}-icon-extra-small { font-size: $width-icon_extra_small; // 8px } .#{$prefix}-icon-default { font-size: $width-icon_medium; // 16px } .#{$prefix}-icon-extra-large { font-size: $width-icon_extra_large; // 24px }变量值定义在 variables.scss并且这些尺寸 token 来自 Semi 的设计令牌体系$width-icon-*因此图标尺寸与整套设计系统保持了一致的节奏。尺寸演示import React from react; import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from douyinfe/semi-icons; () { // eslint-disable-next-line react/jsx-key const types [IconSearch /, IconHelpCircle /, IconAlertCircle /, IconMinusCircle /, IconPlusCircle /, IconPlus /, IconRefresh /]; const sizes [extra-small, small, default, large, extra-large]; let icons types.map((type, i) { return div key{i} style{{ marginBottom: 4 }}{sizes.map(size React.cloneElement(type, { size, key: size }))}/div; }); return icons; };五、旋转与加载动画rotate / spin图标自带rotate与spin两个能力无需额外写 CSSimport React from react; import { IconHome, IconEmoji, IconSpin } from douyinfe/semi-icons; () ( div IconHome sizesmall / IconEmoji rotate{180} / IconSpin spin / /div );源码解析rotate在 Icon.tsx 中只要rotate是安全整数就会直接拼出transform: rotate(Xdeg)应用到外层span上spin为外层span追加semi-icon-spinning类动画定义在 icons.scss.#{$prefix}-icon-spinning { animation: $motion-icon_spin-animationDuration linear infinite #{$prefix}-icon-animation-rotate; animation-fill-mode: forwards; } keyframes #{$prefix}-icon-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }旋转动画单圈时长由令牌$motion-icon_spin-animationDuration控制值为.6s见 variables.scss即图标 0.6 秒匀速旋转一周适合表达加载中、刷新中这类状态。六、单色图标的颜色定制面性图标、线性图标以及 AI 图标中的单色图标默认不带颜色遵循以下规则自动继承外部容器 CSS 的color属性因为 SVG 的fill: currentColor也可以直接给 Icon 设置style的color覆盖。import React from react; import { IconLikeHeart, IconFlag, IconLock, IconUnlock } from douyinfe/semi-icons; () ( div div style{{ color: #E91E63 }} IconLikeHeart sizeextra-large/ IconFlag sizeextra-large/ /div br/ div IconLock style{{ color: #6A3AC7 }} sizeextra-large / IconUnlock style{{ color: #9C27B0 }} sizeextra-large/ /div /div );底层依据同样在 icons.scss 中.#{$prefix}-icon { ... fill: currentColor; }fill: currentColor让 SVG 图形颜色跟随 CSS 的color关键字从而实现了父容器着色 行内 style 覆盖两种改色方式。七、AI 双色与多色图标的 fill 着色AI 图标中的双色、多色图标自带默认配色可通过fill属性修改fill支持string与string[]两种形式。双色图标fill 支持 2 个颜色import React from react; import { IconAIWandLevel2, IconAIFilledLevel2 } from douyinfe/semi-icons; () ( div IconAIWandLevel2 fill{[var(--semi-color-danger), var(--semi-color-success)]} style{{ marginRight: 10 }} sizeextra-large/ IconAIFilledLevel2 fill{var(--semi-color-success)} sizeextra-large/ /div );多色图标当前最多传入 4 个颜色import React from react; import { IconAIBellLevel3, IconAIWandLevel3, IconAIFilledLevel3 } from douyinfe/semi-icons; () ( div IconAIBellLevel3 style{{ marginRight: 10 }} sizeextra-large/ IconAIWandLevel3 fill{[var(--semi-color-danger), var(--semi-color-success), var(--semi-color-primary), var(--semi-color-warning)]} style{{ marginRight: 10 }} sizeextra-large/ IconAIFilledLevel3 fill{[var(--semi-color-primary), var(--semi-color-success)]} sizeextra-large/ /div );示例中使用了var(--semi-color-*)语义色变量这是把 AI 图标颜色与 Semi 主题含暗色模式对齐的推荐做法而不是写死十六进制色值。fill 在源码中如何生效fill有两个关键实现点外壳转发在 Icon.tsx 中当传入了fill时会通过React.cloneElement把fill注入到内部 SVG 组件上颜色分配每个多色 SVG 组件内部调用 utils.ts 的getFillColor(fill, num)将颜色分配到各路径上其逻辑为传入string自动重复填充到所需数量如双色传一个颜色两个路径都用它传入string[]数量不足时循环补全超过时截断到所需数量当需要 4 个颜色时数组会反转后再使用不传fill使用默认配色——双色默认[rgba(166,71,255), currentColor]多色默认四段紫色→蓝色渐变rgba(233,69,255)、rgba(166,71,255)、rgba(107,97,255)、rgba(46,140,255)。以 IconAIWandLevel2.tsx 为例组件内通过const [primaryColor, secondColor] getFillColor(fill, 2)取出两个颜色并分别赋给不同的path从而形成双色视觉。AI 图标一览Level 1/2/3 分级AI 图标自 v2.86.0 起提供覆盖搜索、编辑、文件、图像、魔棒、铃铛等 AI 场景每类按等级Level 1/2/3区分面性/线性/双色/多色形态铃铛类IconAIBellLevel1、IconAIBellLevel2、IconAIBellLevel3编辑类IconAIEditLevel1、IconAIEditLevel2、IconAIEditLevel3文件类IconAIFileLevel1、IconAIFileLevel2、IconAIFileLevel3面性类IconAIFilledLevel1、IconAIFilledLevel2、IconAIFilledLevel3图像类IconAIImageLevel1、IconAIImageLevel2、IconAIImageLevel3搜索类IconAISearchLevel1、IconAISearchLevel2、IconAISearchLevel3线性类IconAIStrokedLevel1、IconAIStrokedLevel2、IconAIStrokedLevel3魔棒类IconAIWandLevel1、IconAIWandLevel2、IconAIWandLevel3加载类IconAILoading对应源码文件可直接在 packages/semi-icons/src/icons 目录中按IconAI*前缀检索。八、自定义图标当内置图标无法满足业务需求时有两条官方推荐的路径。路径一自定义 SVG Icon 组件将任意 SVG 元素作为svg属性传入 Icon 组件size、rotate、spin等能力依然全部生效import React from react; import { Icon } from douyinfe/semi-ui; () { function CustomIcon() { return svg width1em height1em viewBox0 0 24 24 fillnone xmlnshttp://www.w3.org/2000/svg circle cx12 cy12 r11 fill#FBCD2C/ mask idmask0 maskTypealpha maskUnitsuserSpaceOnUse x1 y1 width22 height22 circle cx12 cy12 r11 fill#A2845E/ /mask g maskurl(#mask0) path fillRuleevenodd clipRuleevenodd dM11.9996 17.7963C13.7184 17.7963 15.2479 16.3561 16.0881 14.2048C16.6103 13.9909 17.1072 13.3424 17.334 12.4957C17.629 11.3948 17.5705 10.4118 16.7665 10.1059C16.6885 6.27115 15.1754 4.78714 11.9996 4.78714C8.82412 4.78714 7.31097 6.27097 7.2328 10.1052C6.42711 10.4103 6.36828 11.394 6.66349 12.4957C6.89064 13.3435 7.38849 13.9926 7.91145 14.2056C8.7518 16.3565 10.2811 17.7963 11.9996 17.7963ZM20.0126 23C20.34 23 20.5906 22.7037 20.4686 22.3999C19.6099 20.2625 16.1444 18.6636 12 18.6636C7.85555 18.6636 4.39008 20.2625 3.53142 22.3999C3.40937 22.7037 3.65999 23 3.9874 23H20.0126Z fillwhite/ /g /svg; } return ( div Icon svg{CustomIcon /} / Icon svg{CustomIcon /} rotate{180} / /div ); };路径二svgr 将 .svg 文件转为 React 组件如果希望直接使用设计稿导出的 SVG 文件可以借助svgr/webpack在 webpack 配置中加入// webpack.config.js { test: /\.svg$/, use: [svgr/webpack], }随后像引入普通 React 组件一样使用import { Icon } from douyinfe/semi-ui; import StarIcon from ./star.svg; Icon svg{StarIcon /} /由于自定义 SVG 同样经由Icon外壳渲染前述的尺寸、旋转、spin、点击事件等属性一应可用。九、API 参考Icon以下为 Icon 组件完整属性表继承自 官方文档 并与 Icon.tsx 中的IconProps保持一致属性说明类型默认值className类名string无fill双色、多色图标的填充颜色string | string[]无onClick单击图标的回调事件(e: Event) void无onMouseDown鼠标按钮按下的回调事件 v1.21(e: Event) void无onMouseEnter进入图标的回调事件(e: Event) void无onMouseLeave离开图标的回调事件(e: Event) void无onMouseMove移动鼠标的回调事件 v1.21(e: Event) void无onMouseUp鼠标按钮抬起的回调事件 v1.21(e: Event) void无rotate旋转度数number无size尺寸支持inherit、extra-small、small、default、large、extra-largestringdefaultspin旋转动画boolean无style图标样式CSSProperties无svg图标内容ReactNode无注意几个细节rotate只接受数值内部通过Number.isSafeInteger(rotate)判断后才应用 transformsize的类型IconSize由douyinfe/semi-icons导出TS 项目中可直接引用鼠标相关事件onMouseDown、onMouseMove、onMouseUp自 v1.21 起可用。十、无障碍Accessibility图标组件在可访问性上遵循以下约定Icon 组件外层span的role为img其aria-label默认为组件的文件名type例如IconHome的aria-label为home如果你有更好的语义化名字可通过aria-label显式传入覆盖默认值import React from react; import { IconHome } from douyinfe/semi-icons; () IconHome aria-labelback to homepage /;Icon 内部的svg元素是装饰元素默认设置了aria-hidden以不被屏幕阅读器阅读避免读屏重复播报。这两点都能在源码中找到直接证据外层span的roleimg与aria-label{type}见 Icon.tsx内部 SVG 的aria-hidden{true}与focusable{false}见任意图标文件例如 IconAIWandLevel2.tsx 的svg属性。十一、彩色 lab 图标速查douyinfe/semi-icons-labv2.48 之后提供需单独安装不可改色覆盖了 Semi Design 各组件与常用场景主题完整组件名如下源码位于 packages/semi-icons-lab/src/iconsIconAccessibility、IconAnchor、IconAutocomplete、IconAvatar、IconBackTop、IconBadge、IconBadgeStar、IconBanner、IconBreadcrumb、IconButton、IconCalendar、IconCard、IconCarousel、IconCascader、IconChangelog、IconChart、IconChat、IconCheckbox、IconCodeHighlight、IconCollapse、IconCollapsible、IconColorPlatte、IconColorPlatteNew、IconConfig、IconDarkMode、IconDatePicker、IconDescriptions、IconDivider、IconDropdown、IconEmpty、IconFaq、IconForm、IconGettingStarted、IconGrid、IconHeart、IconHighlight、IconImage、IconInput、IconInputNumber、IconIntro、IconJsonViewer、IconLayout、IconList、IconLocaleProvider、IconLottie、IconMarkdown、IconModal、IconNavigation、IconNotification、IconOverflow、IconPagination、IconPincode、IconPopconfirm、IconPopover、IconProgress、IconRadio、IconRating、IconScrollList、IconSelect、IconSideSheet、IconSkeleton、IconSlider、IconSpace、IconSpin、IconSteps、IconSwitch、IconTable、IconTabs、IconTag、IconTagInput、IconTimePicker、IconTimeline、IconToast、IconToken、IconTooltip、IconTransfer、IconTree、IconTreeSelect、IconTypography、IconUpload、IconVersionOne、IconVersionTwo、IconWebcomponents、IconWheelChair结语Semi Design 的图标体系在设计上做了清晰的层次划分douyinfe/semi-icons提供面性、线性、AI 三套可深度定制颜色的图标douyinfe/semi-icons-lab提供不可改色的彩色主题图标外层 Icon 组件则统一封装了尺寸、旋转、spin 动画、事件与无障碍属性。理解fill: currentColor、getFillColor的颜色分配逻辑以及size→ CSS 类 →font-size的映射链路后你就能在业务中自由组合图标、主题色与动画甚至将任意自定义 SVG 无缝接入这套组件体系。赞分享前端UI组件设计系统【免费下载链接】semi-designA modern, comprehensive, flexible design system and React UI library, AI-friendly built-in.Provide 3000 Design Tokens, easy to build your design system. Make Semi Design to Any Design.‍ Design to Code in one click项目地址https://gitcode.com/gh_mirrors/se/semi-design点击查看免费下载相关推荐gpui-kit Icon 组件完全指南SVG 图标渲染、尺寸/颜色/变换定制与自定义资产源gpui kit Icon 组件完全指南SVG 图标渲染、尺寸/颜色/变换定制与自定义资产源 导读 gpui kit 的 Icon 是一个灵活、可组合的 SV桌面应用UI组件前端Ant Design Icon 图标系统深度指南安装、三种主题、双色与自定义图标全解析Ant Design Icon 图标系统深度指南安装、三种主题、双色与自定义图标全解析 本指南以 antdAnt Design React组件库中的 Ic前端UI组件设计系统Ant Design 双色图标完全指南用 twoToneColor 与全局主色 API 定制图标主题色Ant Design 双色图标完全指南用 twoToneColor 与全局主色 API 定制图标主题色 Ant Design 的图标体系以 SVG 为基础提前端UI组件设计系统上一篇3个技巧让你的百度网盘命令行工具告别转存失败下一篇告别QQ空间回忆丢失用GetQzonehistory永久保存青春记忆创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考