npm 包 brander 使用教程

阅读时长 5 分钟读完

在前端开发中,随着前端框架、库等工具的快速发展,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 实例。在这个过程中,我们需要提供一些配置项:

  1. color:SVG 图标的颜色;
  2. background:SVG 图标的背景色;
  3. url:SVG 图标的链接。

值得一提的是,这里的 brander 函数会返回一个 Brander 实例,我们可以使用这个实例来调用其他方法。

生成 icon

Brander 实例创建完成之后,我们就可以使用 icon() 方法来生成 icon 了:

这里,我们使用 icon() 方法来生成 icon。在生成 icon 的时候,我们需要提供一些配置项:

  1. name:生成 icon 的名称;
  2. width:生成 icon 的宽度;
  3. height:生成 icon 的高度;
  4. type:生成 icon 的类型(必须为 svg 或者 png)。

值得一提的是,这里,我们使用 instance 实例调用了 icon() 方法,生成的 icon 会被保存到 icon 变量中。

输出 icon

最后,我们需要使用 toString() 方法,将生成的 icon 输出:

这里,我们使用 console.log() 方法输出 icon。

2. 使用命令行工具

安装命令行工具

Brander 包提供了一个方便的命令行工具 Brander-cli,我们可以使用以下命令来安装:

生成 icon

安装完成之后,我们就可以使用 Brander-cli 命令行工具来生成 icon 了:

在这个命令行中,我们需要提供一些参数:

  1. n, --name:生成图标的名称;
  2. w, --width:生成图标的宽度;
  3. h, --height:生成图标的高度;
  4. t, --type:生成图标的类型,必须为 svg 或者 png
  5. c, --color:生成图标的颜色;
  6. b, --background:生成图标的背景颜色;
  7. 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

纠错
反馈