介绍
@zaninime/grunt-grunticon 是一款使用 grunt 自动化构建工具来生成 svg 图标集的 npm 包。它可以将多个 svg 图标文件合并为一个集合，同时生成相应的 CSS 和 PNG 文件，方便前端开发人员在网页中使用。
安装
在使用@zaninime/grunt-grunticon之前，需要先安装它。
在终端中，使用以下命令安装：
npm install @zaninime/grunt-grunticon --save-dev
使用说明
1. 准备 svg 图标文件
在使用@zaninime/grunt-grunticon之前，需要准备一些矢量图形，可以是 svg 文件、Adobe Illustrator 等流行的矢量图形文件格式。
在本例中，我们将使用以下两个 svg 文件：
-- -------------------- ---- -------
---- --- -- - ---
---- ---------- - --- ---- -----------------------------------
------- ------- ------- --------
------
---- --- -- - ---
---- ---------- - --- ---- -----------------------------------
----- ----- ----- ----------- --------------
----- ------ ------ ---------- ----------- --------------
------2. 配置 gruntfile.js
配置 gruntfile.js 文件，具体内容如下：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
---------- -
--------- -
------ --
------- -----
---- -----------
---- ----------
----- --------------
---
-------- -
----------- ----
-
-
-
---
------------------------------------------------
----------------------------- ------------------------
--在上述代码中，我们定义了 grunticon 构建任务，使用 grunticon:svgIcons 作为任务名。常规情况下，我们挑选 "local" 作为文件配置、对象的名字。
在文件对象中，有三个属性：
expand: expand 开式必须为 true，这将允许您以数组样式的完全兼容任意数量的泛指通配符。cwd：是文件 (源) 目录，glob 模式载入的起始位置。dest：是目标目录。
在配置项中，我们指定了 enhanceSVG 选项为 true。这意味着 grunticon 将在 svg 文件中插入一些其他内容。
关于 gruntfile.js 配置的更多信息，可以查看 https://github.com/zaninime/grunt-grunticon#options-and-tasks
3. 运行 gruntfile.js
接下来，在终端中，使用以下命令来运行 gruntfile.js 文件：
grunt
运行成功后，您将在“svg-icons”目录下看到以下文件：
svg-icons.css svg-icons.data.svg svg-icons.fallback.css svg-icons.html
使用示例
为了使用生成的 SVG 图标集，我们需要将它们引入到 web 页面中。
以下是使用 CSS sprite 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------ -----------------
----- ---------------- ------------------------------------ --
-------
------
--------- --------------
---- -------------
---- ---------- - --- ---- ---------- ---------------- -------------------------------------------------- --------
------
---- -------------
---- ---------- - --- ---- ---------- ---------------- ------------------------------------------------ --------
------
-------
-------总结
通过使用 @zaninime/grunt-grunticon，我们可以很容易地将多个 svg 图标合并为一个集合，同时生成相应的 CSS 和 PNG 文件，方便前端开发人员在网站中使用。在这篇文章中，我们介绍了使用 @zaninime/grunt-grunticon 的基本步骤、gruntfile.js 的配置选项以及如何使用所生成的 SVG 图标集。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560e881e8991b448df24b