前端开发中使用 icon 是非常常见的一种需求，Fomantic-UI 是一个比较流行的 UI 框架，它内置了丰富的 icon，但是在某些情况下，我们需要自定义 icon，这个时候我们可以使用 npm 包 create-fomantic-icons 来生成自己的 Fomantic-UI icon。
什么是 create-fomantic-icons ？
create-fomantic-icons 是一个用于生成 Fomantic-UI icon 的 npm 包。它支持 SVG 格式的图片，可以将图片转化为 Fomantic-UI 的 icon。
安装
在使用 create-fomantic-icons 之前，我们需要安装它。在终端输入以下命令来安装 create-fomantic-icons。
--- ------- -- ---------------------
使用
在安装好 create-fomantic-icons 之后，我们就可以使用它来生成 Fomantic-UI icon。
1. 准备 SVG 图片
首先，需要准备好要转化的 SVG 图片。在这里，我们以 Test.svg 为例。
2. 生成 icon
在命令行中输入以下命令，用 Test.svg 生成一个名为 test 的 icon。
--------------------- -------- -- ----
其中，-t 后面的 test 是要生成的 icon 的名称，可以自定义。
create-fomantic-icons 还支持其他选项，如 -o、-d、-w、-h 等，这些选项可以用来指定输出文件、生成的 icon 的宽高等。
3. 使用生成的 icon
在生成了 icon 后，我们就可以在 Fomantic-UI 中使用它了。在 HTML 标签中添加以下代码即可。
-- ----------- ----------
其中，test 是生成的 icon 的名称，icon 是 Fomantic-UI 中 icon 的通用类名。
示例代码
以下是一个完整的示例代码，演示了如何使用 create-fomantic-icons 生成并使用自定义 icon。
1. 准备 SVG 图片
在项目中准备好 Test.svg。
2. 生成 icon
在终端中输入以下命令。
--------------------- -------- -- ---- -- -------
其中，-t 后面的 test 是要生成的 icon 的名称，-o 后面的 ./icons 是要输出的文件夹。
3. 使用生成的 icon
在 HTML 标签中添加以下代码。
------ ----- ---------------- -------------------------------------------------------------------------------- -- ------- ------ -- ----------- ---------- ------- ----------------------------------------------------------- ------- ---------------------------------------------------------------------------------------- -------
其中，test 是生成的 icon 的名称，icon 是 Fomantic-UI 中 icon 的通用类名。
总结
使用 create-fomantic-icons 可以方便快捷地生成自己的 Fomantic-UI icon，在项目中使用自定义 icon 可以提高个性化和美观度。
当然，还有很多其它功能和选项，需要我们进一步了解和学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067350890c4f7277583983