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

Привет!
У меня есть вопрос о вёрстке. Я смотрю на страницу chrome:settings в Chromium и вижу иконки в исходном коде, такие как <iron-icon icon="settings:performance"></iron-icon>. Я посмотрел документацию на webcomponents.org и видел, что нужно использовать <iron-icon icon="search"></iron-icon> в HTML, чтобы получить иконку. Но я не понимаю, откуда на самом деле берутся эти иконки и как они вставляются на страницу. Это особенность Polymer? Еще один вопрос: на странице chrome:settings иконка имеет id "settings:performance", но на странице iron icon ничего подобного нет. Можете ли вы помочь собрать этот пазл?
  • 20 октября 2023 г. 11:18
Ответы на вопрос 2
Значки из железа (iron-icon) являются элементами, предоставляемыми библиотекой компонентов Polymer, которая используется в Chromium. Эти иконки обычно отображаются с использованием иконок Material Design.

Для использования значков железа, вы должны сначала подключить библиотеку Polymer, а затем вставить элемент <iron-icon> со значением атрибута "icon", указывающим идентификатор желаемой иконки. Например, <iron-icon icon="search"></iron-icon> отобразит иконку поиска.

Отображаемые значки обычно берутся из иконок Material Design в виде векторных файлов SVG. Значки Material Design доступны для использования в вашей веб-странице и сгруппированы в наборы иконок. Эти наборы, такие как "settings" и "performance", имеют свои идентификаторы, по которым можно получить нужную иконку.

На странице chrome:settings используется иконка с идентификатором "settings:performance", который, вероятно, является специфичным для использования в браузере Chrome и не указан в документации <iron-icon>. Вам может потребоваться обратиться к исходному коду Chromium, чтобы найти информацию об этом конкретном значке.

Определенно, использование Polymer и значков из железа - это особенность, предоставляемая Polymer. Если вы хотите использовать эти значки без зависимости от Polymer, вы также можете рассмотреть другие варианты иконок, такие как иконки Material Design в виде CSS-классов или использование других наборов иконок, таких как Font Awesome.
Нужно изучить код на GitHub, чтобы понять, как работает документация. В коде есть ссылка на описание кастомных иконсетов. Один из таких кастомных иконсетов, называемый "inline", приведен в качестве примера на GitHub, а в данном случае используется кастомный иконсет "settings".
Похожие вопросы