Question

先谢谢了。在Google Polymer 3中，我使用了以下链接来获取图标
https://npm-demos.appspot.com/@polymer/iron-icons@3.0.1/demo/index.html 我可以使用图标列表中的图像，而无法使用Av，通讯，设备等中的其他图像。有人可以帮我吗？

Answer 1

最好显示一些代码。确切地说，是您导入图标并使用它们的代码段。我相信您可能没有导入所有图标集-

但是，使用Polymer提供的图标的最佳方法是创建一个仅包含您实际要使用的图标的文件。这将减少加载时间并使图标通常更易于访问。

示例：
该Polymer3元素称为custom-icons.js

import '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<iron-iconset-svg size="24" name="custom-icons">

 <svg>
    <defs>
        <g id="menu">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </g>
        <g id="arrow-back">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
        </g>
    </defs>
 </svg>

</iron-iconset-svg>`;

document.head.appendChild($_documentContainer.content);

Answer 2

您需要将其他图标集明确导入为：

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-icons/iron-icons.js';

以下是用于“ Av”，“通信”，“设备”图标的

import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/communication-icons.js';
import '@polymer/iron-icons/device-icons.js';

如何从Polymer JS中的铁图标列表中获取设备和硬件图标？

2 个答案: