npm 包 Graphicon 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

Graphicon 是一款基于 SVG 的 JavaScript 图标库，拥有众多常用图标，而且支持自定义颜色、大小等特性。通过 npm 安装 Graphicon，我们可以方便地在前端项目中使用它提供的各种图标。

安装

使用 npm 安装 Graphicon 很简单，只需要在终端中运行下面的命令即可。

npm install graphicon --save

引入

安装成功后，我们需要在代码中引入 Graphicon。Graphicon 提供了多种方式引入，这里我们以 CommonJS 的方式为例。

var Graphicon = require('graphicon');

使用

Graphicon 提供多种图标，我们可以通过调用相应的方法生成对应的 SVG。下面以一个最简单的例子为介绍。

<div id="icon"></div>

var Graphicon = require('graphicon');

var iconDiv = document.getElementById('icon');

var svg = Graphicon.expand();

iconDiv.innerHTML = svg;

这里我们使用的是 Graphicon 的 expand 方法，它会返回一个 <svg> 标签的字符串，其中包含 default 类型的图标，它需要通过 innerHTML 方法插入到页面中。

实际场景中，我们更多是使用 Graphicon 提供的其他类型的图标。比如，我们要使用一个打开的文件夹图标。我们只需要调用 folder-open 方法即可生成对应的 SVG 图标。

<div id="icon"></div>

var Graphicon = require('graphicon');

var iconDiv = document.getElementById('icon');

var svg = Graphicon.folderOpen();

iconDiv.innerHTML = svg;

自定义属性

除了使用默认的属性外，我们还可以使用以下属性自定义 SVG 图标。

size

设置图标的尺寸，必须是数字类型。

var Graphicon = require('graphicon');

var svg = Graphicon.folderOpen({ size: 20 });

color

设置图标的颜色，必须是有效的颜色值，比如 #000，white，rgba(0,0,0,0.5) 等等。

var Graphicon = require('graphicon');

var svg = Graphicon.folderOpen({ color: '#ff0' });

rotate

设置图标旋转的角度，必须是数字类型。

var Graphicon = require('graphicon');

var svg = Graphicon.folderOpen({ rotate: 90 });

flip

设置图标翻转的方式，取值为 horizontal 或 vertical，只能设置一个值。

var Graphicon = require('graphicon');

var svg = Graphicon.folderOpen({ flip: 'horizontal' });

自定义图标

除了使用 Graphicon 提供的众多图标外，我们还可以自定义自己的图标。下面我们将介绍如何自定义一个简单的图标——一个由两条水平线和一条竖直线组成的十字形。

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

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

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

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

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

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

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

---

上述代码定义了一个 simple-cross 方法，它接受 options 和 root 两个参数。options 是一个包含尺寸、颜色等属性的对象，它将指定最终生成的 SVG 图标的属性。root 参数是可选的，它表示 SVG 的根元素。

simple-cross 方法中使用两条水平线和一条竖直线生成一个十字形图标。其过程比较简单：首先计算出图标的中心坐标，然后根据中心坐标和尺寸等信息绘制出两条水平线和一条竖直线。

我们可以使用和使用 Graphicon 提供的其他图标时相同的方式使用我们刚刚定义的 simple-cross 图标。

<div id="simple-cross"></div>

var Graphicon = require('graphicon');

var iconDiv = document.getElementById('simple-cross');

var svg = Graphicon.simpleCross({ size: 20, color: '#ff0' });

iconDiv.innerHTML = svg;

结语

通过上述教程，我们已经学会了如何在前端中使用 npm 包 Graphicon。同时，我们还深入了解了 Graphicon 的使用方法，包括自定义属性和自定义图标等。在实际开发中，Graphicon 给我们带来了很大的便利，它使我们能够很容易地生成各种常用的 SVG 图标，而且还可以根据需要自定义图标。

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