前言

最近 varlet 开源了自己的图标解决方案，刚好公司也遇到了一些图标相关的问题，记录下我的一些见解和收获。

问题

首先先列一下我遇到了什么问题：

• 图标分散，不便于统一管理
• 项目中使用图标混乱，全靠口口相传，命名和流程不规范
• 可复用度低，维护成本高，开发体验差
• ......

解决思路

图标预览

目前 varlet 做了一个用于预览图标的仓库， varletjs.github.io/varlet-icon…

这里列出来的图标是 varlet 的内置图标。

现状是，并没有一个地方收集所有的图标，图标都在蓝湖的设计稿上。内容少的时候还好，多的话，管理成本和使用成本都会上涨。

所以需要有个地方展示所有图标，做需求的时候，有需要就可以来这里查找并使用。设计师也可以在这里做图标管理，比如，删除图标，替换图标或者新增图标。

如果有需求做定制，可以拿这个仓库自己改下或者参照这个仓库再做一个。

工程化

考虑到每次迭代都可能有新的图标进来，如果手动去维护每个图标的话，不仅成本高，还容易出错。 将打包出来的组件作为一个包发到公司的私服上，这样相关项目直接更新依赖，按需使用就可以了。

如果需要类型提示，也要携带这个

支持框架

有些开发者所在的公司，不同的部门可能使用了不同的前端框架，比如 Vue3 和 React，varlet-icon-builder 提供了一个配置项 framework，可根据需要生成对应的组件。

组件

实际开发时，是有图标复用的需求的，比如在A页面，有一个绘画的图标，尺寸是40x40，在B页面，设计的尺寸是50x50，项目为每个尺寸都引入一个图标的成本是很高的，维护起来也有心智负担。

考虑到这些，varlet-icon-builder提供了生成组件的能力，

pnpm run icons:generate

为了便于定制化，额外生成了一个 XIcon 的组件，可以借助这个组件，定制图标的宽高和颜色（还可以通过 wrapperComponentName 自定义名称）

  <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>

字体文件

pnpm run icons:build

其中 index.js 里面包含 unicode

结语

如果您有什么疑问或者建议，欢迎到 varlet 的 github仓库 或者 社区群 留言