Нативный способ покрасить SVG-иконки

Скрипты и советы | 22 июля 2020 1 451

Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании Tinkoff, CSS, Работа с векторной графикой, HTML, Angular, svg, svg иконки, css, html, html5,

Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.

Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.

Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.
Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.


Читать дальше →

Источник: Уроки CSS на Хабрахабре

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют...

Подробнее
«WARNING: sanitizing HTML stripped some content» и как с ним правильно бороться

Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы...

Подробнее
Пошаговая инструкция: как с Node.js организовать иконки из Figma в проекте

Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а...

Подробнее
Замена иконок Личных сообщений на fontawesome - плагин для DLE

Небольшой хак-плагин для замены иконок сообщений используемых в шаблоне pm.tpl на иконический шрифт из набора...

Подробнее
Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

Мой коллега Роман недавно объявил о выходе нашей новой библиотеки компонентов под Angular Taiga UI. В инструкциях...

Подробнее
[Из песочницы] Создание Angular 2+ компонентов с возможностью переключения темы

Всем привет. Итак, допустим мы пишем сайт, на котором нужно реализовать возможность динамического переключения настроек...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями