前言
在前端开发过程中，我们经常需要用到图标库，一个优秀的图标库可以大大提高我们项目的开发效率。而 @beezyinc/grunt-dr-svg-sprites-bz 就是一款非常优秀的图标库工具，它支持 SVG 以及一些其他矢量图标的打包，可以方便地生成符号和雪碧图。本篇文章就是讲解 @beezyinc/grunt-dr-svg-sprites-bz 的使用教程。
安装和配置
安装
在使用之前我们首先需要全局安装 grunt-cli：
npm install -g grunt-cli
之后我们就可以安装 @beezyinc/grunt-dr-svg-sprites-bz:
npm install @beezyinc/grunt-dr-svg-sprites-bz --save-dev
安装完毕后我们可以在 package.json 文件里添加如下配置：
{
"scripts": {
"build": "grunt",
"dev": "grunt watch"
}
}这样，我们就能够运行 npm run build 或 npm run dev 命令来启动 @beezyinc/grunt-dr-svg-sprites-bz 了。
配置
对于 @beezyinc/grunt-dr-svg-sprites-bz 的配置，我们需要在项目根目录下创建一个名为 Gruntfile.js 的文件，该文件包含了所有的 grunt 任务和配置信息，具体配置如下：
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
-- ----
------ -
---- ------
----- -------
-------- ---------
--
-- -------
------------ -
-------- -
-------- -
------- ----
--
------ -
---- ---------- ------ ------------- -------------- ----- --------- ----------------
-
-
--
-- ------
------ -
-------- -
------ -----
--
-------- -
------ ---- --------- ----------------
------ ---------------
-
--
-- -- ----- ---
---- ------------------------------------
--------- --------------------------
------- ------------------------
-------- ------------------
---
--------------------------------------------------------
------------------------------------------
----------------------------- -
-------
---
--------------------------- -
--------------
---
--上述代码中，我们主要是对 svg_sprites 进行了配置，其中 options 用来配置生成符号或雪碧图的类型，files 则指定了源文件和目标文件的路径。watch 配置则表示在源文件发生改变时需要执行的任务。
示例
接下来，我们提供一个使用示例，以便更好地理解 @beezyinc/grunt-dr-svg-sprites-bz 的使用方法。
首先，在 src/icons 目录下放置若干 svg 文件，例如 facebook.svg 和 twitter.svg：
-- -------------------- ---- ------- ---- ------------ --- ---- ---------------------------------- ---------- - -- ---- ----- -------------- ----- ----------------- - -- ----- -- -------------------------- ------ ---- ----------- --- ---- ---------------------------------- ---------- - -- ---- ----- -------------- ------ ------------ ----------- ----------- ----- ----------- ---------- ----------------- ---------- ---------- --------------------------------------- -------- ------------ ------ - -------- -------- -------------------------------------------------- ----------- ----------- ----- - --- ----- ---- ----- ---------------------------------------------- ----- ----- ----- ------ ---------------------------------------- ----------------------- ----- ---- ----- ---- ------ ---------- ----------- ------------ ---------- ----------------------- ----- ----- ------ ----- ------ ----- ----- - ------------- ------------------------------- ------ ------ ----- -- ---------- ------
然后，我们运行 npm run build 命令，将生成如下的 svg 文件 dist/sprites/icons.svg：
-- -------------------- ---- -------
---- ------- ------ ---
---- ---------------------------------- ----------------------
------- ------------- ---------- - -- ----
----- -------------- ----- ----------------- - -- ----- -- --------------------------
---------
------- ------------ ---------- - -- ----
----- -------------- ------ ------------ ----------- ----------- ----- ----------- ---------- ----------------- ---------- ---------- --------------------------------------- -------- ------------ ------ - -------- -------- -------------------------------------------------- ----------- ----------- ----- - --- ----- ---- ----- ---------------------------------------------- ----- ----- ----- ------ ---------------------------------------- ----------------------- ----- ---- ----- ---- ------ ---------- ----------- ------------ ---------- ----------------------- ----- ----- ------ ----- ------ ----- ----- - ------------- ------------------------------- ------ ------ ----- -- ----------
---------
------最后，我们将 dist/sprites/icons.svg 文件插入到需要使用的 html 文件中即可。
<svg class="icon" aria-hidden="true"> <use xlink:href="dist/sprites/icons.svg#facebook"></use> </svg> <svg class="icon" aria-hidden="true"> <use xlink:href="dist/sprites/icons.svg#twitter"></use> </svg>
总结
@beezyinc/grunt-dr-svg-sprites-bz 是一款非常好用的图标库工具，它支持 SVG 以及一些其他矢量图标的打包，可以方便地生成符号和雪碧图。在实际开发过程中，我们非常建议使用 @beezyinc/grunt-dr-svg-sprites-bz，以提高构建效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674181e8991b448e3c51