Откуда берутся iron icon?
Всем привет!
Подскажите, пжл, плюсовому программисту про вёрстку ;)
Вот смотрю я на хромиум. У него внутри есть страница chrome:settings.
На странице есть иконки.
В исходниках я вижу:
https://chromium.googlesource.com/chromium/src/+/m...
<iron-icon icon="settings:performance"></iron-icon> |
<iron-icon icon="settings:performance"></iron-icon>
Окей, я иду в гугл и вижу доку:
https://www.webcomponents.org/element/@polymer/iro...
В доке написано, вставьте в html что-то типа:
<iron-icon icon="search"></iron-icon>
и якобы наступит вселенское счастье.
Причём, если кликнуть в Demo на странице iron icon, то там даже есть внешний вид иконок.
Я не понял только одного момента: а откуда они физически берутся?
Я вижу, что после сборки на странице образуется некий svg.
Но вот кто и откуда его тянет, и как вставляет в страницу - я не понимаю.
Это polymer так устроен?
И отдельный вопрос: на хромиумной странице иконка имеет id равный settings:performance.
Но на странице iron icon ничего такого нет. Хотя соседняя иконка accessibility вполне себе есть.
В общем, помогите собрать паззл, пжл! ;))
Дополнительно:
Ну собсно как и всегда когдадокументация говно - идёшь на гитхаб, там открываешь код и смотришь как оно работает.
Тут благо прямо в коде есть ссылка на описание кастомных иконсетов. Точно также как там в примере кастомный иконсет inline, тут используется кастомный иконсет settings.
- Большое спасибо!
Разобрался :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Iron icons являются частью библиотеки компонентов Polymer. Они предоставляют набор векторных иконок, которые могут быть использованы в веб-приложениях для улучшения пользовательского интерфейса.
Iron icons доступны через элемент , который позволяет легко встраивать иконки в HTML код. Для использования iron icons, вам необходимо подключить библиотеку Polymer и элементы iron-icons в вашем проекте.
Чтобы добавить iron icons в ваш проект, следуйте этим шагам:
1. Установите Polymer и iron-icons через npm или bower:
```
npm install --save @polymer/polymer @polymer/iron-icons
```
или
```
bower install --save Polymer/polymer PolymerElements/iron-icons
```
2. Импортируйте iron-icons в ваш HTML файл:
```html
```
3. Используйте элемент для добавления иконки в ваш код:
```html
```
Где "icons:check" - это название иконки из набора iron icons. Вы можете выбрать любую иконку из набора, указав соответствующее название.
Таким образом, iron icons предоставляют удобный способ добавления векторных иконок в ваши веб-приложения, что помогает улучшить пользовательский интерфейс и сделать его более привлекательным для пользователей.