当前位置：首页 > news >正文

OpenTiny icons——超轻量的CSS图标库，引领图标库新风向

news 来源：原创 2025/5/14 9:15:28

我们非常高兴地宣布 @opentiny/icons 正式发布啦！

· 源码：https://github.com/opentiny/icons（欢迎 Star ⭐）

· 官网：https://opentiny.github.io/icons/

· 图标预览：https://opentiny.github.io/icons/browser-icons-base

OpenTiny Icons 是 OpenTiny 团队开发的一款纯CSS图标库，覆盖了华为云规范中的四大类型的图标，其中单色图标以线型图标为主的设计风格，图标统一为16*16的大小，拥有安全边距，保证了一致的视觉大小。彩色图标是高清的华为云服务图标统一为72*72的大小，彩色状态图标统一为80*80的大小。

该图标库主要有以下亮点特色：

· 纯``CSS``图标库：纯CSS图标，支持 Vue / React 等所有的前端框架

· 高性能：基于 UnoCSS，性能极优越，可全面代替组件型图标

· 按需引用：支持 @iconify-json导出方式，配合 @unocss/preset-icons插件，可实现按需引用

· 图标美观``/``丰富：290+ 基础单色图标，精致美观，风格统一，大小&颜色随心变，可满足大部分日常开发需要

· 可扩展：支持自定义 SVG 图标，兼容整个 Iconify 生态的图标

· 支持多色图标：支持 240+ 的多色图标，覆盖常见的空数据、请求状态、应用权限等场景

· 适用场景多：支持组件库的开发，日常应用开发

历史背景

我们团队目前维护着一套Vue组件的图标库，在维护中一直秉持着“只增不减”的原则，造成图标库存在了很多问题，比如：图标名错误，图标重复，另外图标来源不同，存在多个设计规范，视觉大小不统一，但由于已经上生产使用，一直不敢清理整顿，越来越膨胀。与此同时，我们的设计部门也维护着一套图标集，有基础图标、服务图标、状态图标等等，不仅图标设计得很漂亮，有完善的图标设计规范指导，风格一致，而且设计部门每月都在持续维护更新。于是就想基于设计部门的图标集做一个新的图标库并开源出来，跟设计部门沟通了一下，得到了许可！

图标库是很小众的技术，从早先的字体图标，到现在形形色色的组件库图标，我们应该使用什么技术去做呢？我们做了以下分析：

1、在当前组件化开发思想中，很多框架提供了图标组件，但我们认为“组件封装”多少都会带来一定的性能影响，这一点可以验证，见本文的性能分析部分，所以我们放弃了组件化图标的方案。

2、前端大神 Anthony Fu 在自己的博客《聊聊纯 CSS 图标》中提到：在纯 CSS 中按需使用任何图标的能力的一套方案，能支持单色和彩色图标。纯CSS才是纯粹的前端技术，而且它天然支持所有的前端框架，Anthony Fu大神也表达过图标不适合做成组件的意见，让我们更加坚定用CSS来做图标的想法。

于是我们将 OpenTiny 设计团队设计的 SVG 图标资源，使用上文的图标算法构建出来一套 @opentiny/icons 图标库。

接下来带大家快速上手 @opentiny/icons图标库：

快速入门

以一个普通的 vite工程 为例，执行以下命令安装 @opentiny/icons 图标库。

npm install @opentiny/icons

在 style.css 中加入以下内容，就可以放心使用图标库了

@import "@opentiny/icons/style/all.css"

由于是纯CSS图标库，可以通过CSS去完全控制样式，其中单色图标支持通过字体大小和颜色去自定义样式，而彩色图标仅支持自定义大小。以下图标类名，可以从官网的“图标预览”中查询。

<i class="ci-home" style="font-size:14px; color:#000;"></i>
<i class="ci-email" style="font-size:16px; color:#d32222;"></i>
<i class="ci-news" style="font-size:18x; color:#4822d3;"></i>
<i class="ci-date" style="font-size:20px; color:#40d322;"></i>
<hr />
<i class="ci-svc-ecs" style="font-size:72px;"></i>
<i class="ci-svc-obs" style="font-size:72px;"></i>
<i class="ci-svc-cbr" style="font-size:72px;"></i>
<i class="ci-svc-live" style="font-size:72px;"></i>
<hr />

效果如下：
在这里插入图片描述

图标类别

除了全量引入之外，还可以按图标类别导入图标，以减小引入样式文件的体积。通过图标预览可以快速了解这些图标类别。所有图标类名的前缀统一为 ci-类别-*, 其中base类别的图标最为常用，所以省略了类别，其它类别的图标必须带着类别。

全量图标: all.css
基础图标: base.css
服务图标: svc.css
服务扩展图标: ext.css
状态图标: stat.css

比如只导入基础图标：

@import "@opentiny/icons/style/base.css"

按需引用 (推荐)

UnoCSS是一个非常优秀的原子化CSS引擎，它提供有 @unocss/preset-icons 图标插件，可以实现按需引用图标，减小构建产物大小。Iconify 是一个全面的图标解决方案，提供了一个庞大的图标库，它维护了150 多个开源图标集的超过 20 万个图标。@unocss/preset-icons 图标插件就是使用 Iconify作为图标数据源，如果想使用图标插件，就需要用户提前安装@iconify-json/* 依赖包，也就是发布为 IconifyJson 格式的图标数据集 。

为了支持 @unocss/preset-icons 图标插件，我们也将所有的图标以 IconifyJson 格式的导出，这样就可以在项目中，使用图标插件并按需引用图标了。

通过引入 @unocss/preset-icons 插件，可以实现按需引用图标，减小构建产物大小，并且可以调整图标前缀，避免与其它图标库冲突。

在 vite.config.ts 文件中加入以下内容。

import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import presetIcons from '@unocss/preset-icons'export default defineConfig({plugins: [UnoCSS({presets: [presetIcons({prefix: '',extraProperties: {display: 'inline-block','vertical-align': 'middle'},collections: {ci: () => import('@opentiny/icons/json/icons.json', { assert: { type: 'json' }}).then((i) => i.default)}})]})]
})

然后在 main.ts 中添加下面代码，以启用 UnoCSS 的功能：

import 'virtual:uno.css'

经过以上配置，就可以正常使用所有的图标了。

详细用法可参考官网配置说明。

自定义 SVG 图标

当需要使用设计师提供的 SVG图标 时， @unocss/preset-icons 插件允许我们快速的自定义图标，比如在上面配置的collections 节点中增加如下配置，就可以通过 <i class="custom-circle"></i> 来显示一个图标了。

  collections: {ci: () => import('@opentiny/icons/json/icons.json', { assert: { type: 'json' }}).then((i) => i.default),custom: {circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',/* ...其它自定义图标... */},}

详细用法可参考UnoCSS文档。

图标方案的对比&择优

当我们获得精美设计的图标之后，为什么我们会选择纯CSS图标库做为最优的渲染方案，尤其是在组件化思潮的时代，选择了这种看起来有些“低端”的技术呢？

做技术的人都会善于思考技术的本质与摸索最佳实践，所以跟风永远不是最好的选择。我们思考的是什么才是当前图标库的最佳实践，最优的性能的方案？

现在就“渲染svg 图标方案”来讲，我们有多少种技术渲染出来，哪种技术性能最好呢？这里使用Vue技术栈来研究一下，如果选择其它前端框架也会得到近似的结果吧。

~~svg字体方案~~
~~svg精灵图方案~~
纯CSS图标方案
渲染Svg标签
渲染图标组件：封装Svg标签到组件模板中
渲染第三方图标库：本质也是渲染图标组件，比如 @opentiny/vue-icons， @ant-design/icons-vue ，@element-plus/icons-vue

上述方案中，字体方案性能应该很优秀，但是它是过时方案，比如需要字体文件，只能是单色，容易模糊失真等； svg精灵图必须放置几百个svg到 html中且不能摇树，也是不太能接受的方案。

所以我们只讨论后面的4种情况。

对这4种情况，我们打开浏览器开发者工具录制性能，然后单次渲染1000个图标，最后对执行脚本，渲染绘制时长进行分析（机器不同，数据会不同，但不影响横向评比）：

在这里插入图片描述

通过分析以上结果，我们得到以下结论：

1、执行脚本时间：

由图1，2可知：vdom 越大，渲染的元素越多，执行脚本时长越大。执行脚本时长排序：渲染大svg > 渲染小 svg > 渲染 i 标签。
由图2，3可知：由于Vue 组件在运行时，并不是“零成本"，所以执行脚本时长排序：渲染组件 > 直接渲染Dom

2、绘制（Painting) 时间 & 渲染（Rendering) 时间：

由图1与图2，3，4比较可知，纯CSS图标的绘制时长为15ms, 渲染时长为9ms，其它方案绘制时长36~ 47ms，渲染时长41~ 270ms，这说明浏览器通过css绘制的性能是直接绘制Svg的2~3倍。猜测是由于css的内容是固定的，且在css编译时就缓存结果，但页面上渲染svg元素时，浏览器需要实时解析后才能绘制，无法提前优化。

综上，纯CSS图标就是最优性能的图标方案，它具有最简单的dom结构，又具有最快的绘制性能，综合性能远远超过了svg方案和svg组件方案。如果你在注重性能的场景，比如大数据表格时，请一定使用纯CSS图标代替图标组件，欢迎考虑一下@opentiny/icons 图标库了！

从另一个角度上，CSS是前端的三大基本技术之一，它天然就支持所有框架，所有浏览器场景。在【Anthony Fu】托尼的开源之路: 集论中，也表达过类似的观点：每次增加技术约束，就会减少目标受众用户，如果Vite只服务于Vue技术栈，那么它无法拥有目前广泛的目标受众用户。图标库也一样，当你实现了一套Vue\React\Solid … 的图标库时，你无形就排除了许多的目标用户。只有拥抱纯CSS，拥抱纯前端的技术才能放大自身的价值。

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
OpenTiny 代码仓库：https://github.com/opentiny
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码：https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor ~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献 ~