在前端开发中，我们经常需要使用图标来进行页面布局和美化。Polymer 前端框架提供了一个方便的npm包，@polymer/iron-iconset，可以帮助我们快速创建自定义图标集合，以便在页面中使用。
安装
在使用@polymer/iron-iconset之前，我们需要先安装它。打开你的终端并执行：
npm install @polymer/iron-iconset
这将安装@polymer/iron-iconset和它的依赖项。
使用
创建图标
在使用@polymer/iron-iconset之前，我们需要确定我们想要使用的图标。在本例中，我们将创建一个名为custom-icons 的图标集合，其中包含一个名为my-icon的图标。
创建图标需要将它们放在一个<template>元素中，并使用iron-iconset-svg元素将它们包装在一起。该元素有两个属性：
name：图标集合的名称。size：图标的大小。
在iron-iconset-svg元素中，我们使用包含 SVG 类型的<g>元素来定义图标。在 SVG 中，图标通常作为 <path> 元素进行存储。
以下是创建一个名为 my-icon 的图标的示例代码：
-- -------------------- ---- -------
----------
----------------- ------------------- ----------
-----
------
-- -------------
----- ------ ---- ------- ----- ---------------- ------ ----- -- --- -- ------------------ ----- --- ---------------------- ---------- - - -- - ----------- -------------- - ------- ------------ --- ------- ---------- -- -- ------------------------------ ----------- - -------- ---------- --------- ---- - -- ---------- -------
----
-------
------
-------------------
-----------在页面中使用图标
在定义图标后，我们可以在页面中使用它们。使用iron-icon元素可以将图标插入到 HTML 页面中。iron-icon元素有一个属性，icon，用于指定图标的名称。
以下是一个包含我们刚刚创建的 my-icon 图标的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ---- ---------------
------- ------------- --------------------------------------------------------------------------------------
----- ------------ ---------------------------------------------------------
-------
------
---------- ----------------------------------------
-------
-------在页面中，只需添加以上代码并在浏览器中打开该页面即可看到我们新建的自定义图标。
总结
在本教程中，我们学习了如何使用@polymer/iron-iconset创建自定义图标，以及如何在页面中使用它。通过这个npm包，我们可以方便地管理和使用我们的自定义图标，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f755b4ba9b7065299ccbcb7