前言
在前端开发中，经常需要用到图标来增强用户界面的交互性和可读性。@npm-polymer/iron-icons 是一个非常有用的 npm 包，它提供了丰富的 SVG 图标，供开发者使用。本篇文章将详细介绍如何使用 @npm-polymer/iron-icons 包。
安装
首先，我们需要安装 @npm-polymer/iron-icons 包。可以通过以下命令在你的项目中安装此包:
npm install @npm-polymer/iron-icons
使用
@npm-polymer/iron-icons 提供的图标可以通过不同的元素和属性来使用。下面将分别介绍这些元素和属性的使用方法。
iron-icon
<iron-icon>是一个自定义元素，它可以在任何地方使用，通常用于将图标添加到按钮、链接、输入框等元素中。使用该元素需要指定 icon 属性，该属性可以是任何 @npm-polymer/iron-icons 包中提供的图标名称。
-- -------------------- ---- ------- ---- ---------- --- ------ ----- ---------------- ---------------- ------------ ------- ------------- -------------------------- ---- -- ----------------------- ---- --- ----- ---------------- ------------------------------------------------------------- ------- ------ ------------------ --------------------------------- -------
iron-iconset-svg
在某些情况下，需要将多个图标存储在单个文件中。@npm-polymer/iron-icons 为此提供了元素 iron-iconset-svg，该元素可以将多个 svg 图标打包到一个文件中。在使用该元素前，需要提前在 @npm-polymer/iron-icons 包的 css 文件中定义一个自定义的图标集。如下所示:
-- -------------------- ---- ------- -- -------------- -- ---------- - ------------ ------------- ---- ------------------------------- ------------------- - --------- - -------- ------------- ------ ----- ------- ----- ---------- ----- ------------ -- ----------- ------- --------------- ----- ------------ ------- ----------- ------- ------------ ------------- ------ ----- ----------------------- ------------ ------------------------ ---------- -
在 css 文件中定义好图标集后，就可以使用 iron-iconset-svg 元素了。该元素需要提供以下两个属性:
name: 图标集的名称。size: 图标的长宽尺寸。
-- -------------------- ---- -------
---- ---------- ---
------
----- ----------------
----------------------- ------------
------- ------------- --------------------------
---- -- ----------------------- ---- ---
----- ---------------- -------------------------------------------------------------
-------
-- ----- --
---------------- -
------- -----
------ -----
------------- -----
----------------- -----
-
--------
-------
------
----------------- --------------- ----------
-----
------
-- -----------------
----- ------------------------------------------------------------------
----
-- -----------------
----- ----------------------------------------------------------------------------------------------------------------------
----
-------
------
-------------------
--------
---------- ----------------------------------------
------------ ----------
---------
--------
---------- ----------------------------------------
------------ ----------
---------
-------在上述例子中，我们在 iron-iconset-svg 中定义了 my-icons 图标集，并提供了两个图标: my-icon-one 和 my-icon-two。在使用时，可以通过 icon 属性指定图标集和图标名称。图标集和图标名称之间需要用冒号进行连接。
iron-icon-button
<iron-icon-button>是一个自定义元素，它将 <button> 元素与 <iron-icon> 元素进行组合，提供了一种使用图标的简单方式。该元素同样需要指定 icon 属性，该属性可以是任何 @npm-polymer/iron-icons 包中提供的图标名称。
-- -------------------- ---- ------- ---- ---------- --- ------ ----- ---------------- ----------------------- ------------ ------- ------------- -------------------------- ---- -- ----------------------- ---- --- ----- ---------------- ------------------------------------------------------------- ------- ------ ----------------- ---------------------------------- -------
svg
最后，我们还可以直接使用 <svg> 元素来显示 @npm-polymer/iron-icons 包中的任何一个图标。
-- -------------------- ---- -------
---- ---------- ---
------
----- ----------------
---------- ------------
------- ------------- --------------------------
---- -- ----------------------- ---- ---
----- ---------------- -------------------------------------------------------------
-------
------
-----
---- --------------------------------------------------------------------------
------
-------在上述例子中，我们使用 <use> 元素引用了 iron-icons.svg 文件中的 search 图标。可以通过设置 xlink:href 属性来指定文件路径和图标名称。需要注意的是，该方法需要支持 SVG 的浏览器才能正常显示。
至此，我们已经介绍了 @npm-polymer/iron-icons 包中提供图标的不同使用方法。下面，我们将通过一个完整的示例来演示如何运用这些方法来实现一个带有图标的按钮。
-- -------------------- ---- -------
---- ---------- ---
------
----- ----------------
----------- ------ ---------------
------- ------------- --------------------------
---- -- ----------------------- ---- ---
----- ---------------- -------------------------------------------------------------
-------
-- ----- --
---------------- -
------- -----
------ -----
------------- -----
----------------- -----
-
---------------- -
----------------- --------
------- -----
-------------- ----
-------- ----
-------- -----
------------ -------
---------------- -------
------- --------
-
--------
-------
------
----------------- --------------- ----------
-----
------
-- -------------
----- ------------------------------------------------------------------
----
-------
------
-------------------
------------------
---------- ------------------------------------
----------- ----------
-------------------
-------在上述例子中，我们使用 iron-iconset-svg 元素将自定义的 my-icon 图标集打包，并在 <iron-icon> 元素中使用该图标。同时，我们还使用 <span> 元素添加了按钮的文本，并通过 css 设置了按钮的样式。最终，我们得到了一个简单的带有图标的按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb21