前端图标库构建 | 快速构建企业自用/开源图标库

写在前面

掘金的同学们好久不见，我是varlet（https://github.com/varletjs/varlet）组件库的作者haoziqaq（https://github.com/haoziqaq），自varlet开源已经历了三年多的时光之旅。varlet在社区同学们的帮助下也愈发成熟，作者十分感激。

让作者觉得更有意义的事情在于到底是为了构建varlet而制作出来的一些内部工具，在组织成员们的努力下也逐渐外部化，完善化，逐渐变成了独立可用的开源工具。例如varlet-cli(https://varletjs.org/#/zh-CN/cli)已经作为许多企业内部组件库的基础设施，能够提供快速启动组件库制作的能力。

库建链

这次作者为同学们带来了一个能够快速建设企业内部图标库，或者开源图标库的一套我们工具链。这套工具链到底也是为了varlet官方图标库而实现的，这一次将其完善，将其集成并制作了一个启动模板(https://github.com/varletjs/varlet-icons-library-starter)，为社区同学提供快速上手。

特性

• 支持组件 svg 图标集转换为 vue3、react 和 esm、cjs 模块
• 支持 svg 图标集转换为 web 字体
• 支持图标组件自动导入
• 内置主题浏览站点
• 支持从figma设计文件中获取所有svg文件
• 提供发布相关工具，支持npm、git发布与更新日志生成

主題使用

字体标题

import '<packageName>/svg-fonts/css/i-icons.css'

<i class="i i-account-circle-outline"></i>
<i class="i i-account-circle-outline" style="color: red; font-size: 30px"></i>

Vue 组件

<script setup>
import { XIcon, AccountCircleOutline } from '<packageName>'
</script>
<template>
  <x-icon>
    <account-circle-outline />
  </x-icon>
     <x-icon color="red" :size="30">
    <account-circle-outline />
  </x-icon>
</template>

React 组件

import { XIcon, AccountCircleOutline } from '<packageName>'
function Demo() {
  return <>
    <XIcon>
      <AccountCircleOutline />
    </XIcon>
       <XIcon color="red" size={30}>
      <AccountCircleOutline />
    </XIcon>
  </>

}

自动翻译原文作者:

当我们生成图标组件的时候，我们也为unplugin-vue-components（https://github.com/unplugin/unplugin-vue-components）生成一个resolver用于自动导入图标组件。这里我们就这样vite搭配vue component。

// vite.config.ts
import components from 'unplugin-vue-components/vite'
import XIconResolver from '<packageName>/resolver'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    components({
      resolvers: [XIconResolver()]
    })
  ]
})

<template>
  <x-icon>
    <x-account-circle-outline />
  </x-icon>
     <x-icon color="red" :size="30">
    <x-account-circle-outline />
  </x-icon>
</template>

框架支持

我们支持Vue3和React，默认将组件编译为Vue3。如果要生成React组件，请参考以下配置。

// vi.config.ts
import { defineConfig } from '@varlet/icon-builder'
export default defineConfig({
  name: 'i-icons',
  namespace: 'i',
  fontFamilyClassName: 'i',
  output: './svg-fonts'
+ generate: {
+   framework: 'react'
+ }  
})

// package.json
{
  "peerDependencies": {
    "unplugin-vue-components": "^0.27.0",
-   "vue": "^3.4.29",
+   "react": "^18.3.1" 
  },
}

从figma文档获取svg图标

我们支持从figma文档中获取svg图标，具体实现步骤如下

步骤一

创建一个figma文档，将svg图标库的页面名称设置为Icons，并获取到文件id。

步骤二

获取figma文档的访问令牌。

见这里（https://www.figma.com/developers/api#authentication）

步骤三

设置 token 和 file id 到脚本中。（为了 token 的安全性，更推荐将 token 设置到 ci 环境变量中）。

// package.json
"scripts": {
- "icons:figma": "VI_FIGMA_TOKEN=123456 vi figma -f 123456",
+ "icons:figma": "VI_FIGMA_TOKEN=<token> vi figma -f <fileId>",
}

监听figma文档变化，ci重新执行构建

如果你希望设计师每次更新figma图标库的时候自动执行图标库的构建，可以和你的运维沟通一下，接入figma的webhook，这样就可以完全打通设计师和前端开发工程师的自动化工作流程。

核心命令

启动图标 站点 开发环境

pnpm dev

构建主题预览站点

pnpm build

启动积分 积分 积分模式

pnpm preview

构建图标 web 字体

pnpm icons:build

生成图标组件和esm、cjs模块

pnpm icons:generate

从figma文件获取所有svg文件

pnpm icons:figma

发布主题库

pnpm release

相关

见这里（https://github.com/varletjs/varlet-iconx/blob/main/packages/varlet-icon-builder/README.md#configuration-type-declaration）

写在最后

如果内容碰巧对你有帮助，同时也希望同学们帮助我们继续成长，给我们pr、issue、star，下面是论文相关的仓库。

• Varlet 组件库（https://github.com/varletjs/varlet）
• 主题库快速启动模板（https://github.com/varletjs/varlet-icons-library-starter）