safwan/stdf

从 v1.1.0 开始，STDF 支持 Iconify 方式使用图标。

SVG Sprites

STDF 图标组件的 type 默认为 symbol，即使用 SVG Sprites 技术使用图标，这样可以减少 HTTP 请求，提高页面性能。

STDF 的 SVG Sprites 是使用 SVG symbol，大致原理类似于 CSS 中的 Sprite 技术，将项目中的 SVG 拼接在一个文件内，通过 SVG 中的 use 元素找到对应的图标来显示。

你可以把它类比看成是一种字体，只不过这种字体是由 SVG 组成的，而且可以通过 CSS 控制颜色、大小等属性。所以如果用到比较大或者有多种颜色等比较复杂的图标，建议单独引入 SVG 文件使用，不要放在 symbol 中。

兼容性方面也完全没问题。参考 MDN symbol。

STDF 开发了一个 Rollup/Vite 插件，用于将项目中的 SVG 文件合并成 SVG Sprites，具体使用请参考 rollup-plugin-stdf-icon，由于 svg 格式的多样性，可能存在 rollup-plugin-stdf-icon 处理不准确的情况，请到 GitHub 提 issue，注明 svg 文件的具体情况。

或使用其他 SVG Sprites 合成工具或手动合成，也可以请设计师提供设计物料时一并提供对应的 SVG Sprites。或类似 Remix Icon 这样的图标库，可以直接将选定的多个图标下载为 SVG Sprites。

Iconify

STDF 也可以通过设置 type 为 iconify 或 iconify-color 使用 Iconify 方式使用图标。

Iconify 有很多种使用方式，STDF 选择的是 Tailwind 4 插件的方式，这样对代码的侵入性最小，可参考 Iconify for Tailwind CSS。在 STDF 中使用方式如下：

安装 Tailwind 4 插件

pnpm i -D @iconify/tailwind4

npm i -D @iconify/tailwind4

bun i -D @iconify/tailwind4

yarn add @iconify/tailwind4

安装所需的开源图标库

非常不推荐安装 @iconify/json，这样全量图标库的体积非常大。

按需安装图标库，如使用以下命令安装 Solar 和 Carbon 图标库：

pnpm i -D @iconify-json/solar

npm i -D @iconify-json/solar

bun i -D @iconify-json/solar

yarn add @iconify-json/solar

pnpm i -D @iconify-json/carbon

npm i -D @iconify-json/carbon

bun i -D @iconify-json/carbon

yarn add @iconify-json/carbon

项目的入口 CSS 文件中配置插件，并设置需要使用的图标库前缀，参考 Clean selectors。
```
@plugin "@iconify/tailwind4" {
	prefixes: solar, carbon;
}
```

在组件中使用图标

<Icon type="iconify" name="solar--cat-broken" />

使用 iconify 与 iconify-color 的区别在于，iconify 将图标渲染为蒙版图像，图标颜色为文本颜色，因此与使用 symbol 一样，可以设置 theme 属性控制图标跟随主题色，或者设置文本颜色自定义颜色，一般用于纯色图标。而 iconify-color 将图标渲染为背景图像，将无法设置 theme 属性，也无法设置文本颜色自定义颜色，一般用于多色图标，如 fluent-color 图标库，参考 extra-class-name。

选择哪种方式？

一般来说，在 STDF 项目中可以有以下几种使用 svg 图标方式。

不对 svg 文件做任何处理，直接使用。可以不需要使用 Icon 组件，直接使用 svg 标签，但是会增加 HTTP 请求和工程体积，也不方便统一调整这些图标的属性。一般用来处理比较大比较复杂的 svg 图片，处理小 svg 图标不推荐。
使用 rollup-plugin-stdf-icon 插件。将各个 svg 文件编译之后合并成 SVG symbol，但是要求 svg 文件符合常规标准，否则可能无法正确合并。推荐使用。
使用 Iconify。Iconify 的优点是图标库非常丰富，省去了找图标的麻烦，但是需要手动安装图标库和配置插件，而且项目中可能会有一些冗余图标。推荐使用。
已经有合并的 SVG symbol 文件。一些图标库本身就支持导出 SVG symbol 文件，还有一些其他工具支持合并 svg 为 SVG symbol 文件，或者设计师给的物料就是 SVG symbol 文件，那么可以不用 rollup-plugin-stdf-icon 和 Iconify，直接指定合并后的 SVG symbol 文件路径给 Icon 组件使用。推荐视情况而定。

当然，以上这些方式不是互斥的，一个工程中可能同时使用多种方式。

icon.md 5.3 KB 文件歷史 原始文件

SVG Sprites

Iconify

选择哪种方式？

icon.md 5.3 KB

文件歷史原始文件