什么是 Capz？
Capz 是一个前端开发的 npm 包，它能够帮助前端开发者轻松创建图标字体库，从而解决前端页面图标显示的问题。
Capz 使用
安装 Capz
npm install -g capz
创建图标字体库
通过以下命令可以在当前目录下创建一个新的字体库：
capz initialize my-icons
该命令会在当前目录下新建一个名为 my-icons 的文件夹，该文件夹下包含了 Capz 字体库的初始配置文件。
添加图标
Capz 字体库默认会在 icons 目录下寻找图标。为了添加新的图标，只需要在 icons 目录下添加新的 svg 图标即可。
构建字体库
当添加了新的图标后，需要重新构建字体库，完成构建的命令如下：
capz build my-icons
执行成功后，Capz 会在 my-icons 下生成两个目录： fonts 和 styles。 其中 fonts 目录下包含了字体库的字体文件，styles 目录下包含了生成的样式文件。
使用 Capz 字体库
Capz 字体库通过 iconfont 的方式生成，因此要在代码中使用图标，只需要在 HTML 文件中引入字体文件和样式文件，在需要使用图标的地方使用特定的 CSS 类即可。示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
----- ---------------- ----------------------------------
-------
----- -
-------- -------------
------------ -----------
---------- -----
----------- -------
------------ -------
------------ --
---------------- --------
--------------- -------------------
--------------- -----
----------------------- ------------
------------------------ ----------
-
--------
-------
------
-- ----------- --------------
-- ----------- ---------------
-- ----------- -----------------
-------
-------在上面的代码中，首先引入了字体文件和样式文件，然后定义了 .icon 类用于使用图标，最后在 HTML 中使用了三个图标。需要注意的是，图标的类名即为您在创建字体库时给每个图标指定的名称。
总结
Capz 是一个实用的前端开发工具，它可以快速帮助前端开发者创建图标字体库，从而解决前端页面图标显示的问题。通过本教程的演示，我们相信您已经掌握了 Capz 的基本使用方法，希望本教程对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672081e8991b448e38c6