Как импортировать подмножество полимерных значков

Question

Я использую пару металлических иконок из каждой категории и предпочитаю не импортировать весь набор. есть ли возможность (или оснастка/плагин для вулканизации) только импортировать те, которые мне нужны? и иметь меньший HTML-файл для обслуживания?

Answer 1

Вы можете использовать инструмент Polymer Iconset Generator, чтобы создать свой собственный подмножество значков по умолчанию для железа. Это действительно удобно, и это похоже на то, что вам нужно.

Answer 2

Вы также можете загрузить их непосредственно и индивидуально, в формате ваш хочет, независимо от полимера, из материалов сайта Дизайн Google:

https://material.io/icons/

Таким образом, вы получите новые добавленные иконки, слишком ,

Answer 3

Чтобы импортировать только тот, который вам нужен, вы можете создать свой собственный файл custom-icons.html, который будет иметь ту же базу, что и iron-icons.html.

Вам просто нужно изменить атрибут 'name' от узла <iron-iconset-svg></iron-iconset-svg>, чтобы соответствовать настраиваемому имени, которое вы будете использовать. Я буду использовать «custom-icons», вы будете использовать это имя, чтобы вставить значок после.

Ваш файл будет выглядеть следующим образом:

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
    <iron-iconset-svg name="custom-icons" size="24"> 
     <svg> 
      <defs> 
       . 
       . 
       . 
      </defs> 
     </svg> 
    </iron-iconset-svg> 

<defs>...</defs> Внутри узла вы просто должны скопировать из железистых иконок или других иконок (устройство, редактор, уведомление ...) <g>, которые соответствуют значку, который вы хотите использовать, и вставьте его в свой файл custom-icons.html.

Например, мы хотим, чтобы значок меню из файла iron-icons.html. Просто скопировать этот элемент:

<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 

и вставить его внутри <defs>...</defs> узла внутри пользовательского файла. Вы будете иметь это:

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
<iron-iconset-svg name="custom-icons" size="24"> 
    <svg> 
     <defs> 
      <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 
     </defs> 
    </svg> 
</iron-iconset-svg> 

Теперь в вашем приложении просто импортировать этот файл вместо железосодержащих иконок и использовать значок, как это:

<iron-icon icon="custom-icons:menu"></iron-icon> 

Если вы измените «идентификатор» значение атрибута в <g></g> узле (menu2, например), использовать его как это:

<iron-icon icon="custom-icons:menu2"></iron-icon> 

Для получения более подробной информации перейдите проверить Роб Додсон polycast: Custom icons with Iron Iconsets