前言
前端开发中经常需要使用图标，而使用字体图标无疑是一个比图片更为灵活轻便的选择。Icomoon 是一个非常流行的字体图标库，同时它也提供了 Icomoon-builder 用于自定义图标库。本文将介绍如何使用 npm 包 icomoon-builder 快速搭建一个自定义图标库。
安装 icomoon-builder
我们首先需要全局安装 icomoon-builder：
npm install -g icomoon-builder
使用 icomoon-builder 创建自定义图标库
访问 icomoon.io/app，点击 "New Project" 开始创建一个空白的项目。
选择 "Import Icons" 并上传您的 SVG 图标，或者使用 IcoMoon 提供的图标集。
完成导入后，在 "icons" 标签页中可以看到已经导入的图标。您可以在此处进行添加、删除、修改等操作。
点击右上角的 "Generate Font" 进入生成字体页面。
在 "Font Settings" 页面中进行配置，包括：
- Font name：你的图标字体的名称。
- Class prefix：CSS 类的前缀，用于在实际应用中选择使用哪些字体图标。
- Embed metadata：将 IcoMoon 的元数据嵌入到字体文件中。
- Ligatures：启用图标的字符连体替代。
在 "Select Glyphs" 页面中选择您需要生成的图标并设置它们在字体中的编码和别名，完成后点击 "Download" 下载生成的字体并将它们放入一个目录中，例如：
/my-icons/ ├── font/ │ ├── my-icons.eot │ ├── my-icons.svg │ ├── my-icons.ttf │ └── my-icons.woff └── css/ └── my-icons.css使用 icomoon-builder --prefix [icon-prefix] --colors [color-list] /path/to/icon/files/*.svg 命令生成 TypeScript 定义文件并打印在终端：
icomoon-builder --prefix my-icon --colors red #f00 blue #00f green #0f0 /my-icons/font/*.svg > /my-icons/types.ts
该命令会生成一个名为 types.ts 的文件，文件内容包含：
-- -------------------- ---- ------- ------ --------- ----------- ------- ------------------------------- - ------- ------- ------ ------- - ------ ------- -------- ------------- ------------- ------------------- ------ ----- ------- - ----- -------- --------------------------------- --
myIcon对象包含每个图标的 Component，每个图标都接受color（字体颜色）和size（字体大小）两个 props。在您的项目中使用图标组件：
-- -------------------- ---- ------- ------ - ------- ----------- - ---- ----------------- ----- ------------ -------- - -- -- - ------ - ----- -------------------- ------------ --------- -- ------ - -
总结
使用 icomoon-builder，我们可以快速搭建一个自定义图标库并在项目中使用，这种方式使用字体图标比传统图片更为灵活高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5c81e8991b448e5e5d