前言
最近 varlet 开源了自己的图标解决方案，刚好公司也遇到了一些图标相关的问题，记录下我的一些见解和收获。
问题
首先先列一下我遇到了什么问题：文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
- 图标分散，不便于统一管理
- 项目中使用图标混乱，全靠口口相传，命名和流程不规范
- 可复用度低，维护成本高，开发体验差
- ......
解决思路
图标预览
目前 varlet 做了一个用于预览图标的仓库， varletjs.github.io/varlet-icon…文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
这里列出来的图标是 varlet 的内置图标。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
现状是，并没有一个地方收集所有的图标，图标都在蓝湖的设计稿上。内容少的时候还好，多的话，管理成本和使用成本都会上涨。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
所以需要有个地方展示所有图标，做需求的时候，有需要就可以来这里查找并使用。设计师也可以在这里做图标管理，比如，删除图标，替换图标或者新增图标。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
如果有需求做定制，可以拿这个仓库自己改下或者参照这个仓库再做一个。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
工程化
考虑到每次迭代都可能有新的图标进来，如果手动去维护每个图标的话，不仅成本高，还容易出错。 将打包出来的组件作为一个包发到公司的私服上，这样相关项目直接更新依赖，按需使用就可以了。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
如果需要类型提示，也要携带这个文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/16340.html
支持框架
有些开发者所在的公司，不同的部门可能使用了不同的前端框架，比如 Vue3 和 React，varlet-icon-builder 提供了一个配置项 framework，可根据需要生成对应的组件。
组件
实际开发时，是有图标复用的需求的，比如在A页面，有一个绘画的图标，尺寸是40x40，在B页面，设计的尺寸是50x50，项目为每个尺寸都引入一个图标的成本是很高的，维护起来也有心智负担。
考虑到这些，varlet-icon-builder提供了生成组件的能力，
shell
pnpm run icons:generate
为了便于定制化，额外生成了一个 XIcon 的组件，可以借助这个组件，定制图标的宽高和颜色（还可以通过 wrapperComponentName 自定义名称）
js
<template>
<i :style="style">
<slot />
</i>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
name: 'XIcon',
props: {
size: {
type: [String, Number],
default: '1em',
},
color: {
type: String,
default: 'currentColor',
}
},
setup(props) {
const style = computed(() => ({
display: 'inline-flex',
color: props.color,
'--x-icon-size': typeof props.size === 'number' ? `${props.size}px` : props.size,
}))
return {
style
}
}
})
</script>
字体文件
varlet-icon-builder 提供了生成字体文件的能力，对于公司的flutter项目，就可以直接引入 ttf 和 css 文件，参考 Flutter中使用iconfont
shell
pnpm run icons:build
其中 index.js 里面包含 unicode
评论