前言
在前端开发中，图标的使用非常广泛，同时也是我们前端开发者必备的技能之一。而 @polymer/iron-icons 就是我们非常推荐的一款图标库，它可以帮助我们在开发过程中更快速、方便地使用图标，提高工作效率。
什么是 @polymer/iron-icons
@polymer/iron-icons 是由 Google 开发的一款 Web 组件库，它使用自定义元素技术，提供了一系列常用的图标，供开发者在自己的项目中使用。包含了 Material Design 等主流设计风格的图标，可以很好的为我们的应用提供多种选择。
安装 @polymer/iron-icons
在使用 @polymer/iron-icons 之前，我们需要进行安装。使用 npm 命令即可安装：
npm install @polymer/iron-icons
或者，你可以使用 yarn 进行安装：
yarn add @polymer/iron-icons
使用 @polymer/iron-icons
1. 引入 @polymer/iron-icons
在使用 @polymer/iron-icons 之前，我们需要先引入该库：
<link rel="stylesheet" href="node_modules/@polymer/iron-icons/iron-icons.html">
2. 使用 @polymer/iron-icons
一旦完成了库的引入，我们就可以开始使用其中的图标了。具体使用方法如下：
使用名称为 “icons:icon-name” 的图标：
<iron-icon icon="icons:menu"></iron-icon>
使用名称为 “my-icons:icon-name” 的图标：
<iron-icon icon="my-icons:favorite"></iron-icon>
使用 SVG 格式的图标：
<iron-icon src="demo.svg"></iron-icon>
案例应用
下面我们以一个简单的案例来演示如何使用 @polymer/iron-icons。
-- -------------------- ---- -------
--------- -----
------
------
-------------------------- ------------
------- -----------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------
-------
--------- -
------ -----
------- -----
------ --------
-
--------
-------
------
----------------------- ---------
---------------- ----------------------------------------
---------------- -----------------------------------------------
---------------- -------------------------------
-------
-------在上述案例中，我们先引入了库，然后使用图标的的代码实现了三个不同的图标样式。具体效果如下：
总结
@polymer/iron-icons 是我们非常推荐的一款图标库，在前端开发中广泛应用。借助于它，我们可以快速、方便地使用多种设计风格的图标，并且能够提高我们的工作效率。希望本文能够对大家有所帮助，能够更好地掌握使用 @polymer/iron-icons 的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f75569ca9b7065299ccbca9