前言
在许多前端应用程序中，图标是不可或缺的。在传统的图标处理方法中，我们通常会将图标文件（如 SVG、PNG 等）存储在项目中，并将其作为静态资源引用。但是，在使用各种前端框架（如 Polymer、React、Angular 等）的情况下，图标处理可以更简单，更有效率。
在本文中，我们将介绍使用 Polymer 提供的 npm 包 @polymer/iron-icon 来处理图标。@polymer/iron-icon 是一个可自定义颜色、大小、状态和点击处理的图标库。
安装
在安装并使用 @polymer/iron-icon 前，首先需要安装及配置 Polymer 的开发环境。可以根据 Polymer 的安装说明进行步骤操作。在确保拥有 Polymer 开发环境后，使用 npm 安装 @polymer/iron-icon：
npm install @polymer/iron-icon
使用
基本使用
我们可以通过 iron-icon 元素来使用 @polymer/iron-icon，下面是一个基本示例：
<iron-icon icon="my-icons:dog"></iron-icon>
这段代码将渲染出一个到 my-icons 集合的 dog 图标。实际上，每个 iron-icon 实例仅仅是提供了一个包装，并没有真正的图标内容（即 SVG）。
集合定义
在前面的例子中，my-icons 集合并没有被明确定义，因此需要在集合中定义一个图标。可以通过添加一个 SVG 文件，将其添加到 iron-iconset-svg 自定义元素中，例如以下代码：
-- -------------------- ---- -------
----------------- --------- ----------------
-----
------
-- ---------
----- -------------
----
-------
------
-------------------其中，iron-iconset-svg 元素指定了集合的名称为 my-icons，并且所有图标的默认大小为 24 像素。在 defs 元素内，我们可以添加与图标相关联的任何 SVG 元素，如 g、path、rect 等。其中，g 元素最好使用绝对路径，使图标在缩放时不变形。
自定义
除了集合定义之外，在使用 iron-icon 时，还可以通过添加属性来自定义图标的颜色、大小、状态和点击处理等。以下是一些常用的属性：
icon：指定图标的名称（格式为集合名称:图标名称）。style：指定额外的 CSS 样式。class：指定额外的 CSS 类名。color：指定图标颜色。size：指定图标大小。disabled：指定图标是否禁用。
例如，以下代码将呈现一个红色、大小为 36 像素的禁用状态的 my-icons 集合的 dog 图标：
<iron-icon icon="my-icons:dog" style="color: red;" size="36" disabled></iron-icon>
事件处理
同样，在 iron-icon 中，我们可以添加事件处理器来处理图标的交互事件（如点击、鼠标移入、鼠标移出等）。以下是一个添加了点击事件处理器的示例：
<iron-icon icon="my-icons:dog" on-click="_handleClick"></iron-icon>
在上面的代码中，该图标添加了一个 on-click 属性，表示当鼠标左键单击该图标时将调用名为 _handleClick 的事件处理器。这个事件处理器需要在元素的 JavaScript 代码中被定义：
_handleClick(event) {
console.log('Clicked!');
}总结
在本文中，我们学习了如何在 Polymer 应用程序中使用 @polymer/iron-icon 包来方便地处理图标，包括集合定义、自定义和事件处理等。希望你能够通过此文更好地理解和掌握前端应用程序中的图标处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7558f4a9b7065299ccbcb4