前言
在前端开发过程中，我们经常需要使用图标来为页面和组件增加更好的用户体验。npm 包 @npm-polymer/iron-iconset-svg 是一个强大的工具，可以在 Polymer 应用程序中添加可重用的 SVG 图标集合。本文将会详细介绍如何使用这个工具来增加 SVG 图标集合的支持。
依赖项
在使用 @npm-polymer/iron-iconset-svg 之前，你需要确保你的项目已经满足以下依赖项：
- node.js，版本 10 或更高
- npm，版本 6 或更高
- polymer 和相关库，版本 3 或更高
安装
使用 npm 包管理器安装 @npm-polymer/iron-iconset-svg：
npm install --save @npm-polymer/iron-iconset-svg
创建 SVG 图标集合
在项目的使用 @npm-polymer/iron-iconset-svg 之前，请确保你已经准备好了 SVG 图标。接下来，创建 Iconset 文件夹和 SVG 图标文件，如下：
your-project ├── icons │ ├── Iconset.svg │ ├── icon1.svg │ └── icon2.svg ├── index.html ├── manifest.json └── ...
Iconset 的命名必须符合以下命名规则：
<name>-iconset.svg
name 可以为任意值，但是必须符合小写驼峰式命名规范。Iconset 中的 SVG 图标使用 id 属性来进行唯一标识，例如：
<svg>
<defs>
<g id="icon1">
<path fill="#000000" d="M..."></path>
</g>
</defs>
</svg>注册 SVG 图标集合
注册 SVG 图标集合是创建你的图标集合的第一步，这将使你的图标在 Polymer 组件中可用。为此，你需要在 index.html 中添加以下代码：
<link rel="import" href="/node_modules/@npm-polymer/iron-iconset-svg/iron-iconset-svg.html"> <iron-iconset-svg name="your-iconset-name" size="24" content="[...]" ></iron-iconset-svg>
其中：
- name：你的图标集合的名称字符串，应该与你之前创建的 Iconset 名称相同。
- size：图标基本尺寸。
- content：选择性地定义了包含了哪些图标，可以忽略，让所有图标都可用。
使用你的自定义 SVG 图标
现在你已经成功地注册了你的 SVG 图标集合，并使其在 Polymer 应用程序中可用。使用自定义图标时，你可以像使用标准的 Material Design 图标一样使用它们。
举个例子，使用之前注册的图标的 Polymer 组件模板中的方法，可以使用如下代码：
-- -------------------- ---- -------
----------- --------------------
----------
-------
----- -
-------- ------------
------------ -------
---------------- -------
----------- -----
------- -----
-------- --
------- --------
-
--------
---------- -------------------------------------------
-----------
--------
----- ------------ ------- --------------- -
------ --- ---- - ------ ----------------- -
-
-------------------------------------- --------------
---------
-------------以上代码将会创建一个自定义的 Polymer 组件和一个包含自定义图标的按钮。
总结
本文详细介绍了如何使用 npm 包 @npm-polymer/iron-iconset-svg 来增加 SVG 图标集合支持。通过使用这个工具，你可以快速地创建和注册自定义图标集合，并在 Polymer 应用程序中使用它们。同时本文还提供了部分示例代码，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff181e8991b448ddb24