Использование 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, в репозитории:

GitHub - Fafnur/angular-samples: Samples of using different solutions in Angular

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — icons.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln