在前端开发中，随着前端框架、库等工具的快速发展，npm 包的使用已经成为一项必备技能。在一些较大的项目开发中，如果没有合适的 npm 包，我们无法快速实现需求。今天，我们来介绍一个非常实用的 npm 包：Brander。
什么是 Brander？
Brander 是一个开源 npm 包，其可以快速地生成 SVG 图标，并返回 SVG 和 PNG 格式。比如，我们可以使用它来实现在我们的 React / Vue / Angular 项目中添加自定义的 SVG 图标。
Brander 的安装
我们可以使用 npm 命令来安装 Brander：
--- ------- -------
Brander 的使用方法
我们可以使用 Brander 的 JS API 或者命令行工具来生成 icon。
1. 使用 JS API
创建实例
在使用 Brander 之前，我们需要先创建一个 Brander 实例：
----- ------- - ------------------ ----- -------- - --------- ------ ---------- ----------- ---------- ---- ------------------------- --
这里，我们使用 brander 导入 Brander 包，然后使用 brander 函数创建一个 Brander 实例。在这个过程中，我们需要提供一些配置项：
color：SVG 图标的颜色；background：SVG 图标的背景色；url：SVG 图标的链接。
值得一提的是，这里的 brander 函数会返回一个 Brander 实例，我们可以使用这个实例来调用其他方法。
生成 icon
Brander 实例创建完成之后，我们就可以使用 icon() 方法来生成 icon 了：
----- ---- - --------------- ----- --------- ------ --- ------- --- ----- ----- --
这里，我们使用 icon() 方法来生成 icon。在生成 icon 的时候，我们需要提供一些配置项：
name：生成 icon 的名称；width：生成 icon 的宽度；height：生成 icon 的高度；type：生成 icon 的类型（必须为svg或者png）。
值得一提的是，这里，我们使用 instance 实例调用了 icon() 方法，生成的 icon 会被保存到 icon 变量中。
输出 icon
最后，我们需要使用 toString() 方法，将生成的 icon 输出：
----------------------------
这里，我们使用 console.log() 方法输出 icon。
2. 使用命令行工具
安装命令行工具
Brander 包提供了一个方便的命令行工具 Brander-cli，我们可以使用以下命令来安装：
--- ------- -- -----------
生成 icon
安装完成之后，我们就可以使用 Brander-cli 命令行工具来生成 icon 了：
------- ------ -- ------ -- -- -- -- -- --- -- ------- -- ------- -- -----------------------
在这个命令行中，我们需要提供一些参数：
n,--name：生成图标的名称；w,--width：生成图标的宽度；h,--height：生成图标的高度；t,--type：生成图标的类型，必须为svg或者png；c,--color：生成图标的颜色；b,--background：生成图标的背景颜色；u,--url：生成图标的链接。
输出 icon
最后，我们需要将生成的 icon 输出到文件中：
------- ------ --------
在这个命令行中，我们使用 brander output 命令将 icon 输出到 icon.png 文件中。
Brander 的示例
下面，我们来看一个实际应用的例子，使用 Brander 快速生成一个 Gihub Icon。
1. 使用 JS API
----- ------- - ------------------ ----- -------- - --------- ------ ------- ----------- ------- ---- -------------------- -- ----- ---- - --------------- ----- --------- ------ --- ------- --- ----- ----- -- ----------------------------
在这个例子中，我们生成了一个 github 名称的名为 20*20 的 PNG 图标，并输出到控制台。
2. 使用命令行工具
------- ------ -- ------ -- -- -- -- -- --- -- ---- -- ---- -- ------------------ ------- ------ --------
在这个例子中，我们使用命令行工具生成了一个 github 名称的名为 20*20 的 PNG 图标，并将它输出到 icon.png 文件中。
总结
Brander 是一个非常实用的 npm 包，它可以帮助我们快速生成 SVG 和 PNG 图标，使我们在前端开发中实现快速且自定义的 icon 以及设计。当然，我们也可以根据自己的需求来修改 Brander 的配置，从而实现更加个性化的 icon。祝大家在开发过程中使用 Brander 更加愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c84ccdc64669dde4ea7