在前端开发中，iconset 是非常常用的一个功能。它可以帮助我们管理、使用各种图标样式，并让我们实现快速的图标切换。在 Polymer UI 框架中，@npm-polymer/iron-iconset 就是一款高效、易用的图标集合工具包，今天我们就来详细了解一下如何使用它。
下载与安装
使用 npm 安装 @npm-polymer/iron-iconset，首先要确认已经安装了 node.js，然后在终端执行以下命令：
$ npm install @npm-polymer/iron-iconset
基本使用
首先，我们需要在 HTML 中引入 iron-iconset，如下所示：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------------------------
-------
------
----------------- --------------- ----------
-----
------
-- ---------
----- ----------------------------------------------------
----
-- ------------
----- -----------------------------------------------------------------------------------------------------------------
----- ---------------------------------------------------------------------------------------------------------------------------------------------
----
-------
------
-------------------
---------- --------------------------------
---------- -----------------------------------
-------
-------可以看到，我们在 HTML 文件中先定义了一个 id 为“my-icons”的 iron-iconset，然后在里面定义了两个 icon 样式，分别为“add”和“delete”。其中，每个 icon 样式的定义都需要一个 SVG 图标路径。
最后，我们在 HTML 文件中使用 iron-icon 标签即可直接引用这两个样式了。
API 说明
下面是 @npm-polymer/iron-iconset 各项 API 的详细说明。
iron-iconset-svg
iron-iconset-svg 用于从一个单独的 SVG 标记定义图标集。它包含以下属性：
- name： 定义 iconset 的名称。在引用 iconset 的地方，用“iconset name:icon name”的形式引用。
- size： 定义 iconset 中图标的默认大小，默认为“24”。
iron-iconset
iron-iconset 与iron-iconset-svg类似，但是它是从现有 HTML 标记集合中定义一个图标集。它包含以下属性：
- name： 定义 iconset 的名称。在引用 iconset 的地方，用“iconset name:icon name”的形式引用。
iron-icon
iron-icon 是一个自定义图标元素。它具有以下属性：
- src： 设置图标的 SVG 路径。
- icon： 设置图标的名称。
- alt： 在无法显示图标时设置备用文本。
- title： 鼠标悬停于图标上时显示文本。
总结
通过本文的介绍，现在我们已经熟悉了如何使用 @npm-polymer/iron-iconset，它能够有效地管理我们的图标集合，并让我们实现快速的图标切换。同时，我们还了解了它各项 API 的详细说明。在实际项目开发中，我们可以根据自己的需要轻松地应用这一工具包，为产品界面的美观加分！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb22
