Как получить значки устройств и оборудования из списка значков железа в Polymer JS?

Заранее спасибо. В Google Polymer 3, я использовал ссылку ниже, чтобы получить значки
https://npm-demos.appspot.com/@polymer/iron-icons@3.0.1/demo/index.html Я могу использовать изображения из списка значков и не могу использовать другие изображения из Av, Communication, устройств и т. д. Может кто-нибудь, пожалуйста, помогите мне в этом.

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, Communication, device:

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

Было бы лучше, если бы вы показали какой-нибудь код. Если быть точным, то фрагмент кода, куда вы импортировали значки и использовали их. Я полагаю, что вы могли импортировать не все наборы иконок

Однако лучший способ использовать значки, предоставляемые 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);
Другие вопросы по тегам