Smith 是什么
Smith 是一款前端工具，用于生成 SVG 图标 sprite，提供了多种配置选项，让你可以自定义生成的 SVG sprite。
安装
使用 npm 安装
若你还没安装 npm，请先安装 npm。
执行以下命令：
--- ------- -- ---------
如何使用
创建配置文件 (config.json)
- ----------- -------------- ------------- ------------------- --------- -------- ----------- -------------- -
| 配置项 | 默认值 | 描述 |
|---|---|---|
| iconsDir | ./src/icons | 存放 svg 图标目录 |
| outputFile | ./dist/sprite.svg | 输出的 sprite 文件路径 |
| prefix | icon- | 生成的图标前缀 |
模板文件 (template.hbs)
使用 handlebars 模板引擎生成 svg sprite。
------- ---------
------- ---------------- ---------------------------
----------------
---------
---------添加 SVG 图标文件
在 iconsDir 目录下添加需要生成的 SVG 文件。
运行
执行以下命令：
----- -- -----------
输出的 svg sprite 文件将会生成在 outputFile 中。
示例
假设在 iconsDir 目录下已经有以下的文件：
-- --- ----- ----- --------- ---------- --------- ---------- --------- ---------- --------- ---------- --------- ----------
使用上述的配置和模板文件进行生成，将会得到以下的 SVG sprite 文件：
---- -----------------------------------
------- ----------- ---------- - -- ----
----- ----- ----------- -------------
----- ------ ----------------
---------
------- ----------- ---------- - -- ----
----- ----- ----------- -------------
----- --------- ----------- --------------- ---- - - - -------------
---------
------- ----------- ---------- - -- ----
----- ----- ----------- -------------
----- ------ ----- - - - --- ---------------------- - - - - ------- - - - ---------
---------
------- ----------- ---------- - -- ----
----- ----- ----------- -------------
----- ----- ---- - ---------
---------
------- ----------- ---------- - -- ----
----- ----- ----------- -------------
----- -------- --- ------- -------------------------------- ------------------- ------ ------ ----- --------- ---------- ---------
---------
------你只需要在你的 HTML 中引用该 svg sprite 文件，即可使用里面的图标。
总结
Smith 是一款非常方便的前端工具，可以让你简单高效的生成 SVG sprite 文件，减少了手动维护 SVG sprite 的工作量。希望本文能够对你理解和使用 Smith 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/75291