npm 包 Smith 使用教程

Smith 是什么

Smith 是一款前端工具，用于生成 SVG 图标 sprite，提供了多种配置选项，让你可以自定义生成的 SVG sprite。

安装

使用 npm 安装

若你还没安装 npm，请先安装 npm。

执行以下命令：

npm install -g smith-cli

如何使用

创建配置文件 (config.json)

{
  "iconsDir": "./src/icons",
  "outputFile": "./src/sprite.svg",
  "prefix": "icon-",
  "template": "template.hbs"
}

模板文件 (template.hbs)

使用 handlebars 模板引擎生成 svg sprite。

{{#each symbols}}
  <symbol id="{{this.id}}" viewBox="{{this.viewBox}}">
    {{this.content}}
  </symbol>
{{/each}}

添加 SVG 图标文件

在 iconsDir 目录下添加需要生成的 SVG 文件。

运行

执行以下命令：

smith -c config.json

输出的 svg sprite 文件将会生成在 outputFile 中。

示例

假设在 iconsDir 目录下已经有以下的文件：

|- src
|---- icons
|-------- icon-1.svg
|-------- icon-2.svg
|-------- icon-3.svg
|-------- icon-4.svg
|-------- icon-5.svg

使用上述的配置和模板文件进行生成，将会得到以下的 SVG sprite 文件：

-- -------------------- ---- -------
---- -----------------------------------
  ------- ----------- ---------- - -- ----
    ----- ----- ----------- -------------
    ----- ------ ----------------
  ---------
  ------- ----------- ---------- - -- ----
    ----- ----- ----------- -------------
    ----- --------- ----------- --------------- ---- - - - -------------
  ---------
  ------- ----------- ---------- - -- ----
    ----- ----- ----------- -------------
    ----- ------ ----- - - - --- ---------------------- - - - - ------- - - - ---------
  ---------
  ------- ----------- ---------- - -- ----
    ----- ----- ----------- -------------
    ----- ----- ---- - ---------
  ---------
  ------- ----------- ---------- - -- ----
    ----- ----- ----------- -------------
    ----- -------- --- ------- -------------------------------- ------------------- ------ ------ ----- --------- ---------- ---------
  ---------
------

你只需要在你的 HTML 中引用该 svg sprite 文件，即可使用里面的图标。

总结

Smith 是一款非常方便的前端工具，可以让你简单高效的生成 SVG sprite 文件，减少了手动维护 SVG sprite 的工作量。希望本文能够对你理解和使用 Smith 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75291