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

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

0 голосов
/ 25 октября 2018

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

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Вам необходимо явно импортировать другие наборы значков, такие как: 

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, значки устройств: 

import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/communication-icons.js';
import '@polymer/iron-icons/device-icons.js';
0 голосов
/ 25 октября 2018

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

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