团队把图标方案从iconfont换成iconify了，说说我们的思考（iconfont图标变成框框）

原文：程序员成长指南作者：YeeWang

如有侵权，请联系我们删除。

说到图标，很多前端开发者只想到图标字体，或者组件库提供的图标。当然，这对于大多数开发场景来说已经足够了。

然而iconfont的解决方案实际上是在2016年发布的，距今已经有6年了，这期间我们在设计领域独立解决了图标问题，这些年来积累了丰富的经验。然而，前端开发每天都在发生变化，事实上，近年来图标领域已经出现了许多新星。

对当前计划感到满意通常是由于缺乏远见。 （我从来没有见过更好的）

哪里满足不了我？

字体

iconfont从Bootstrap等早期主流前端UI框架中汲取灵感，以字体的形式加载和显示图标。这增加了字体分组和自定义创建，这在当时是非常先进的。然而，随着前端项目不断碎片化，每个组件可能会单独部署并根据需要进行打包。以这种方式部署和使用整个包会与现有的架构设计产生许多冲突。

无法按需部署：字体包是从iconfont 远程创建的，需要手动创建和制作。灵活的项目往往无法实现精确的摇树并扰乱所有依赖手动操作的流程。

网络开销大：字体加载总是会发出字体请求，有些项目选择使用多种字体格式来实现字体格式兼容，以解决浏览器兼容性问题。如果一个组件中的图标都是独立的字体，那么整个页面就会产生大量的字体请求。

图标稳定性较差：虽然iconfont平台提供了图标地址，域名为at.alicdn.com，但很多企业在使用时并没有考虑CDN的性能。在国际场景中使用这种策略是有风险的。另外，随着图标数量不断增加，字体大小也不断增大，因此用户可能无法随时看到图标。

字体冲突：iconfont 通过使用font-family 设置不同的全局字体名称和字符串来区分图标。但是，如果一个页面上有两个同名的字体库，就会出现无法解决的冲突。例如，两个组件都使用默认名称字体名称。

代码提示：Vite和TS出现后，前端开发体验发生了变化。很多曾经背诵和约定的前端规范，现在使用TS后，文档清晰，易于理解。但如果你还在使用这种字体+样式名的方式，就只能去文档中查询对应图标的具体类，这是无法忍受的。

组件库？

作为一个组件库，它通常提供开发人员可以使用的图标类别。但说实话，你应该把Icon 放在组件库中吗？

最好从设计师的角度来思考这个问题。如果我有一个业务，antd 和antd-mobile 都提供了一组图标，那就意味着我在设计时需要使用antd-mobile 图标。您在设计移动业务PC 业务时是否使用antd Icon？

大多数人认为图标应该重复使用并且具有一致的风格。

当然，antd只是一个例子。从antd 4 开始，他们已经有了答案，以@ant-design/icons 为特色。这是一个非常令人兴奋的举动。

对于Icon，最好使用单独的组件包或SVG 包。

SVG

有朋友说直接用svg可能会更好。是否也可以从iconfont 下载SVG？

是的，SVG 是一个非常好的解决方案，但是它的使用存在一些问题。

html

复制代码

imgsrc=\’xxx.svg\’/

SVG./SVG

以上两种方式在项目部署后都会出现问题。

img方法存在盒子模型等问题，外容器需要垂直对齐，中间，line-height等。

通过图像导入

svg 方法也存在对齐问题。常见的加工方法有bottom: -0.125em。

SVG方法

此外，对于图标，开发人员还维护文本属性，例如文本颜色和大小等继承。

为此，我们还需要给svg属性添加样式处理，如fill: currentColor；width: 1em；

html

复制代码

svgstyle=\’fill:currentColor;width:1em;height:1em;\’./svg

别人用的啥？

那么社区有哪些值得考虑的选择呢？

图标化[1]

拔掉插头图标[2]

Unocs图标[3]

图标[4]

事实上，基于iconify[5] 解决方案已经存在一套非常完整且优秀的工具链。

从生产、发布到消费，有多种情况。 antfu[6]的老板们也对图标充满了热爱和贡献，并提供了很多很棒的解决方案。

其实iconify[7]的核心就是为svg生成json。每个工具链围绕这个json 创建不同的用法。

json

复制代码

{

\’前缀\’:\’ant-design\’,

\’最后修改\’:1656181339,

\’图标\’:{

“满是账本”:{

\’body\’:\’pathfill=\\\’currentColor\\\’d=\\\’M880184H712v-64c0-4.4-3.6-8-8-8h-56c-4.40-83.6-88v64H384v-64c0-4.4-3.6-8-8-8h- 56c-4.40-83.6-88v64H144c-17.70-3214.3-3232v664c017.714.3323232h736c17.7032-14.332-32V216c0-17.7-14.3-32-32-32zM648.3426.8升-87.7161.1h45.7c5.50104.51010v21.3c05.5-4.510 -1010h-63.4v29.7h63.4c5.50104.51010v21.3c05.5-4.510-1010h-63.4V752c05.5-4.510-1010h-41.3c-5.50-10-4.5-10-10v-51.8h-63.1c-5 50 -10-4.5-10-10v-21.3c0-5.54.5-1010-10h63.1v-29.7h-63.1c-5.50-10-4.5-10-10v-21.3c0-5.54.5-1010-10h45 。 2l -88-161.1c-2.6-4.8-.9-10.94-13.6c1.5-.83.1-1.24.8-1.2h46c3.807.22.18.95.5l72.9144.3l73.2-144.3a10100018.9-5.5h45c5 。 50104.5 1010 c.11.7-.33.3-1.14.8z\\\’/\’

}

}

}

所以只要你拥有了iconify[8] 的标准协议，就可以充分利用**iconify**[9] 的整个生态。事实上，iconify[10]本身已经包含了很多图标库，大家可以参考icons[11]。

由于已经有这么多图标，我们仍然需要弄清楚如何创建这个JSON，因为我们在现有项目中已经有一个副本，以便开发人员可以调整他们的计划，但其他最好不要限制一个人的工作习惯。

拥抱 Iconify

在决定使用iconify[12] 作为图标的核心解决方案后，您还应该在团队中考虑如何最好地使用和生产它。

消费方案（怎么用）

我们团队使用的技术栈是：React+Unocss+TypeScript

iconify[13]官方提供的消费React解决方案的方法由于缺乏类型提示以及对编译过程的强烈依赖等原因并不是很流行。

考虑到我们团队现有的技术栈以及团队小伙伴过往的使用习惯，我们选择支持两种方式：

React 组件库(@ant-design/icons[14])

txx

复制代码

从\’@scope/xxx-icons\’ 导入{ AddLine }

导出默认值()=buttonAddLine/Add/Button

联合行动中心图标

txx

复制代码

exportdefault()=Buttoni className=\’i-asc:add-line\’/添加/按钮

生产方案（怎么搞到 iconify.json）

在制作方面，主要考虑的是如何与设计师对接，以及如何查询成本，以便将来横向协作。

因此，我们提供两种方法：

图标字体

菲格玛

Iconfont

说到图标管理，不得不说iconfont深入人心，足以满足上下游团队的所有需求。它也是团体的独立开发，无论出于何种考虑都必须得到制作人的支持。

因此，使用Oil Monkey 脚本，我创建了一个iconfont 插件tampermonkey-iconfont-iconify[15]，它包含以下功能：

导出Iconify JSON

下载React 组件

PS: 其实，说实话，我认为你应该直接在Iconfont 中实现这个功能并升级你的图标解决方案.

Figma

事实上，Iconify 官方提供了如何通过Figma 生成iconify.json 的工作示例：从Figma 导入图标[16]

简而言之，我们使用Figma 提供的API 和Figma ID 来查找相应层中的svg 数据，对其进行清理、压缩，并将其处理为完整的JSON。

总结

总的来说，iconify[17]的解决方案充分利用了svg的功能，并使用iconify.json来存储图标矢量信息。通过各种下游消费方式，开发者可以创建自己喜欢的图标消费方式。在开放的格式下，生产端和消费端是很好分离的，是非依赖关系，用户可以自由组合。经过几年的发展，目前拥有大量的库存图标和丰富的生态系统。

在这个项目中，我们利用上述方案，在保留开发者熟悉的工具的同时，在不改变开发者习惯的情况下，创新性地引入了更好的图标解决方案。

iconify[18]解决方案避免了上面提到的“字体”带来的所有弊端，同时还具有以下优点：

根据项目中使用的图标按需部署和打包产品，无需担心新增内容。

自由组合，您需要使用的所有图标、包装或业务都是SVG

文本样式。所有图标产品都有文本样式控件，因此不存在对齐问题。颜色、尺寸等可以直接通过样式来控制。

即用型，无论多端、PC还是移动，无论您使用什么组件库（只要您的容器支持SVG）

如果您不满意或觉得设计器不适合您当前的业务，您可以使用相同的解决方案轻松创建另一个SVG 包（不到一分钟）。

参考资料

[1] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[2] https://github.com/antfu/unplugin-icons:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fantfu%2Funplugin-icons

[3] https://github.com/unocss/unocss/tree/main/packages/preset-icons:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Funocss%2Funocss%2Ftree%2Fmain%2Fpackages%2Fpreset-icons

[4] https://github.com/antfu/icones:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fantfu%2Ficones

[5] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[6] https://github.com/antfu:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fantfu

[7] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[8] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[9] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[10] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[11] https://github.com/antfu/icones:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fantfu%2Ficones

[12] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[13] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[14] https://npmjs.com/@ant-design/icons:https://link.juejin.cn?target=https%3A%2F%2Fnpmjs.com%2F%40ant-design%2Ficons

[15] https://github.com/yee94/tampermonkey-iconfont-iconify.git:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fyee94%2Ftampermonkey-iconfont-iconify.git

[16]https://docs.iconify.design/tools/tools2/import/figma/:https://link.juejin.cn?target=https%3A%2F%2Fdocs.iconify.design%2Ftools%2Ftools2%2Fimport%2Ffigma%2F

[17] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

[18] https://github.com/iconify/iconify:https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ficonify%2Ficonify

#以上是团队将图标方案从iconfont更改为iconify，相关信息请参考官方公告来说明我们的想法。