简介
@polymer/iron-iconset-svg 是一个 web 开发中常用的 npm 包，它提供了一种定义 SVG 图标集的方式，使得我们能够更轻松地在网页中使用图标。
安装
安装该 npm 包很简单，只需要在命令行中运行以下命令即可：
npm install --save @polymer/iron-iconset-svg
这条命令会将 @polymer/iron-iconset-svg 安装在当前项目的 node_modules 目录下，并在项目中注册该模块。
使用
1. 定义 SVG 图标集
使用 @polymer/iron-iconset-svg 前，我们需要先引入 iron-iconset-svg.html：
<link rel="import" href="../node_modules/@polymer/iron-iconset-svg/iron-iconset-svg.html">
接下来，我们需要定义使用的 SVG 图标集。具体步骤如下：
在
<iron-iconset-svg>标签中给自己起一个唯一的name：<iron-iconset-svg name="my-icons" size="24">
在
<svg>标签中定义你想使用的图标：-- -------------------- ---- ------- ----- ------ -- --------------- ----- ------ ------------------- ---- -- --------------- ----- ----- ---- ----------- ----- ----- ----- ---------- ---- ------- ------这里使用的是 SVG 图标，你也可以使用其他的图标格式，如 PNG 或 JPG 等。
给每个图标设置一个唯一的
id（必须与之前定义的<g>标签的id相同）：-- -------------------- ---- ------- ----------------- --------------- ---------- ----- ------ -- --------------- ----- ------ ------------------- ---- -- --------------- ----- ----- ---- ----------- ----- ----- ----- ---------- ---- ------- ------ -------------------这些
id将会用于后面在网页中使用对应的图标。
2. 在网页中使用图标
定义好 SVG 图标集后，我们就可以在网页中使用它们了。具体步骤如下：
首先，引入
iron-icon.html：<link rel="import" href="../node_modules/@polymer/iron-icon/iron-icon.html">
接着，在需要使用图标的地方，使用
<iron-icon>标签，并设置icon属性为之前定义图标集时设置的name和目标图标的id，最后设置图标的尺寸：<iron-icon icon="my-icons:my-icon-1" style="width: 24px; height: 24px;"></iron-icon>
至此，我们已经成功地在网页中使用了一个 SVG 图标。
3. 可以使用的属性
<iron-icon> 标签提供了很多属性，使得我们能够对图标进行更多的定制。下面介绍一些常用的属性：
icon：用于指定图标集和目标图标的id。src：用于指定图标的文件路径（如果不是 SVG 图标集中的图标）。style：用于指定图标的样式，包括尺寸、颜色等等。class：用于指定图标的 CSS 类。prevent-default：设为 true 会阻止默认行为（一般用于与事件相关的图标）。
更多属性请参考 iron-icon 官方文档。
示例代码
下面是一个完整的示例，包含定义 SVG 图标集和在网页中使用图标的代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------------
----- ------------ ---------------------------------------------------------
----- ------------ -----------------------------------------------------------------------
-------
------
----------------- --------------- ----------
-----
------
-- ---------------
----- ------ -------------------
----
-- ---------------
----- ----- ---- -----------
----- ----- ----- ----------
----
-------
------
-------------------
---------- ------------------------- ------------- ----- ------- -------------------
---------- ------------------------- ------------- ----- ------- -------------------
-------
-------总结
@polymer/iron-iconset-svg 是一个十分方便的 npm 包，它为我们在网页中使用 SVG 图标集提供了一种简单明了的方式。我们只需要定义好图标集，然后就可以在网页中使用它们了。同时，<iron-icon> 标签还提供了很多属性，能够让我们对图标进行更多的定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f757aeea9b7065299ccbcc9