随着前端技术的发展，我们常常需要用到各种各样的图标来装点我们的页面。而 symbolizr-bold 就是一个非常优秀的 npm 包，能够帮助我们快速地把 SVG 图标转换成字体，并应用到我们的项目中。本篇教程将会详细地介绍 symbolizr-bold 的使用方法。
安装
首先，我们需要在本地安装 symbolizr-bold：
npm install symbolizr-bold —save-dev
这时候我们就可以在项目中引入 symbolizr-bold 了。
使用
1. 准备 SVG 图标
首先，我们需要找到一些 SVG 图标，可以在 iconfont 等网站下载。
2. 配置
接下来，我们需要在项目的根目录中创建一个 symbolizr-config.json 文件，并进行配置：
{
"src": "src/assets/svg/*.svg",
"fontName": "myfont",
"dest": "src/assets/fonts/myfont",
"cssTemplate": "symbolizr-bold/css/templates/symbolizr-bold.less"
}其中，src 是 SVG 图标所在的目录，fontName 是生成的字体名称，dest 是生成字体的目录，cssTemplate 则是用来生成字体样式的模板文件。
3. 转换
完成配置后，我们可以使用下列命令来转换 SVG 图标：
node_modules/.bin/symbolizr
此时，node_modules 目录下会生成一个 symbolizr 文件，我们运行这个文件即可进行转换。转换完成之后，你将在 dest 目录下看到生成的字体文件和样式文件。
4. 引用
我们只需要在项目的样式文件中引入生成的样式文件，即可开始使用字体了。其中，.iconfont 是一个类名，可以根据自己的需求修改：
-- -------------------- ---- ------- ------- ------------------------------------------ --------- - ------------ --------- ----------- ------- ----------------------- ------------ ------------------------ ---------- - ------------------ - -------- -------- -
这样，我们就可以在项目中愉快地使用图标了，而无需再添加其他的图片文件。
章节小结
通过本篇教程，我们学习了如何使用 symbolizr-bold 这个 npm 包来将 SVG 图标转换成字体，并将其应用到我们的项目中。相信在之后的开发准备中，symbolizr-bold 将会是一个非常实用的工具。
示例代码：
[myfont-iconfont.less]
-- -------------------- ---- ------- ---------- - ------------ --------- ---- --------------------- ---- --------------------------- ---------------------------- ---------------------- ---------------- --------------------- --------------- -------------------- ------------------- --------------------------- -------------- ------------ ------- ----------- ------- - --------- - ------------ --------- ----------- ------- ----------------------- ------------ ------------------------ ---------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555bc81e8991b448d2d5d