--- highlight: arduino-light theme: nico --- ## 写在前面掘金的同学们好久不见, 我是 [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)提供给社区同学们快速上手。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0078ac6de454b4bb658afb06e781a7c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1730&h=1204&s=200800&e=png&b=f9f3fb) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/460ccd98cb1f4c41ad5bdd0e59c01863~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1551&h=1204&s=181791&e=png&b=36343b) ### 特性 - 支持 svg 图标集转换为 vue3、react 组件和 esm、cjs 模块 - 支持 svg 图标集转换为 web 字体 - 支持图标组件自动导入 - 内置图标预览站点 - 支持从 figma 设计文件中获取所有 svg 文件 - 提供 release 相关工具，支持 npm、git 发布与更新日志生成 ### 图标使用 #### 字体图标 ```js import '/svg-fonts/css/i-icons.css' ``` ```html ``` #### Vue 组件 ```html ``` #### React 组件 ```jsx import { XIcon, AccountCircleOutline } from '' function Demo() { return <> } ``` ### 自动导入组件当我们生成图标组件时，我们也会为 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 生成一个 `resolver` 用于自动导入图标组件。这里我们以 `vite` 搭配 `vue component` 为例。 ```ts // vite.config.ts import components from 'unplugin-vue-components/vite' import XIconResolver from '/resolver' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ components({ resolvers: [XIconResolver()] }) ] }) ``` ```html ``` ### 框架支持我们支持 Vue3 和 React，默认将组件编译为 Vue3。如果要生成 React 组件，请参考以下配置。 ```diff // 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' + } }) ``` ```diff // 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。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8acaa4cda7314168b0801b16e1998e6e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1531&h=1036&s=136075&e=png&b=f8f8f8) #### 步骤二获取 figma 文档的访问 token。 [见这里](https://www.figma.com/developers/api#authentication) #### 步骤三设置 token 和 file id 到脚本中。(为了 token 的安全性，更推荐将 token 设置到 ci 环境变量中)。 ```diff // package.json "scripts": { - "icons:figma": "VI_FIGMA_TOKEN=123456 vi figma -f 123456", + "icons:figma": "VI_FIGMA_TOKEN= vi figma -f ", } ``` ### 监听 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)