简介
cc-grunticon-lib 是一个用于 Grunt 构建工具的插件，它能够将 SVG 图标转换为 CSS 样式表和 PNG 文件。该插件支持处理多种图标格式、复杂的 SVG 动画效果以及自定义的输出路径和文件名。
安装
在使用之前，需要先安装 Node.js 和 Grunt 构建工具。安装完成后，在命令行中执行以下命令安装 cc-grunticon-lib：
npm install --save-dev cc-grunticon-lib
使用
配置 Gruntfile.js
首先，在项目根目录下创建一个 Gruntfile.js 文件，用于配置 Grunt 的任务。在该文件中，需要引入 cc-grunticon-lib 插件，并指定相关参数：
-- -------------------- ---- -------
-------------- - --------------- -
---------------------------------------
------------------
---------- -
-------- -
------ --
------- -----
---- ---------
---- ----------
----- ---------
---
-------- -
----------- ------------
----------- ----------------
---------- ----------------
------------ --------------
-
-
-
---
----------------------------- ---------------
--上述配置中，expand、cwd 和 src 属性指定了待处理的 SVG 图标所在的目录和文件名规则，而 dest 属性则指定了输出路径。options 属性则用于指定一些转换的细节，如生成的 CSS 样式表文件名、PNG 文件名等。
运行任务
在命令行中执行以下命令运行 Grunt 任务：
grunt
执行成功后，即可在输出路径中看到生成的 CSS 样式表和 PNG 文件。
示例代码
以下是一个简单的 SVG 图标示例，它包含两个路径元素，分别表示一个圆和一个正方形：
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="M50,50 m-25,0 a25,25 0 1,0 50,0 a25,25 0 1,0 -50,0" fill="#f00"/> <path d="M62.5,37.5 h-25 v25 h25 z" fill="#00f"/> </svg>
将该代码保存为 icons/example.svg 文件，然后在 Gruntfile.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - --------------- -
---------------------------------------
------------------
---------- -
-------- -
------ --
------- -----
---- ---------
---- ----------
----- ---------
---
-------- -
----------- ------------
----------- ----------------
---------- ----------------
------------ --------------
-
-
-
---
----------------------------- ---------------
--最后，在命令行中执行 grunt 命令即可生成输出文件。打开 output/preview.html 文件，可以看到 SVG 图标已经被转换为了 CSS 样式表和 PNG 文件，并且可以在网页中使用它们：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------ ----------------
------ -
-------- -------------
------ ----
------- ----
--------------- -------
------------------ ----------
-------------------- ------ -------
-
------------ - ----------------- --------------------- ---------------- ---- ----- -
------------ - ----------------- --------------------- ---------------- ---- ----- -
--------
-------
------
------------- ------------
------- --- ---- --------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------