Использование SVG иконок с помощью Angular Material
В данной статье приведу несколько решений как можно использовать Angular Material для вывода пользовательских иконок в SVG.
В документации Angular Material есть часть, которая связана с иконками — SVG icons.
Основная идея вывода иконок с помощью Material заключается в встраивании svg напрямую в документ, что позволяет стилизовать иконки с помощью CSS.
Есть два способа создания иконки:
- Первый способ это использовать путь до SVG иконки. Это решение будет аналогично работе тега
img
.MatIconRegistry
будет загружать иконку поhttp
и вставлять содержимое вHTML
, где используется иконка. - Второй способ это использовать содержимое SVG и создавать иконку без дополнительных http запросов. Для этого просто создаются константы, значение которых и будет содержимое SVG.
Пример создания SVG иконки, указав путь до иконки:
Пример создания SVG иконки, используя содержимое иконки:
Для того чтобы не импортировать MatIconRegistry
и DomSanitizer
каждый раз, создадим простенький сервис — IconService
:
В сервисе реализовано два метода:
add
— создание иконки из содержимого SVG, где первый аргумент это имя иконки, второй аргумент это содержимое SVG.addPath
— создание иконки с использованием пути до иконки, где первый аргумент это имя иконки, второй аргумент это путь до SVG иконки.
Отмечу, что в Angular вы можете использовать пути иконок, которые расположены в assets. Однако путь до них нужно указывать начиная с assets
, также как это делается при использовании картинок в HTML
или CSS
в Angular:
/assets/icons/telegram.svg
Сравнение решений
У каждого из решений есть свои плюсы и минусы.
Использование путей до иконок.
плюсы:
- Не увеличивает исходную сборку проекта
минусы:
- На каждую созданную иконку будет сделан HTTP запрос.
- При использовании SSR могут быть проблемы при сборке проекта, так как нужно особым образом обрабатывать запросы по загрузке иконок. Проблема проявляется при использовании пререндера.
- При медленном интернете иконки могут быть не загружены и пользователь, который получит страницу, может увидеть нежелательные сайд эффекты.
демо:
Использование содержимого SVG.
плюсы:
- Не создает дополнительных запросов к серверу
- Нет проблем с SSR
- Нет проблем с отображением при медленном интернете
минусы:
- Существенно увеличивает сборку проекта, так как все исходники SVG будут храниться в билде.
Если не загружать все иконки в главном модуле, а создавать иконки только в тех местах, где они используются и создавать lazy-loading модули, то негативный эффект может быть сведен к нулю.
демо:
Резюме
В статье разобраны примеры создания пользовательских иконок SVG c помощью Angular Material. Приведено два решения: создание иконок с использованием путей до иконок, а также создание иконок из содержимого SVG. В конце статьи разобраны плюсы и минусы каждого из приведенных решений.
Ссылки
Все исходники находятся на github, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — icons.
Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln