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

稀

耗子君QAQ2024年07月12日约 3 分钟

写在前面

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

让作者觉得更有意义的事情在于原本用于构建 varlet 而制作出来的一些内部工具，在组织成员们的努力下也逐渐外部化，完善化，逐渐变成了一些独立可用的开源工具。

例如 varlet-cli 已经作为许多企业内部组件库的基础设施，为其提供快速启动组件库制作的能力。

图标库构建工具链

这次作者为同学们带来了一个能够快速建设企业内部图标库，或是开源图标库的一套工具链。这套工具链原本也是为了 varlet 官方图标库而实现的，这一次我们将其完善，并将其集成并制作了一个启动模板提供给社区同学们快速上手。

特性

支持 svg 图标集转换为 vue3、react 组件和 esm、cjs 模块
支持 svg 图标集转换为 web 字体
支持图标组件自动导入
内置图标预览站点
支持从 figma 设计文件中获取所有 svg 文件
提供 release 相关工具，支持 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 生成一个 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 文档的访问 token。

见这里

步骤三

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

配置相关

见这里。

写在最后

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

Varlet 组件库
图标库快速启动模板