Немного об иконках css и svg

Прилетела задача:
Нужно допилить тему для сайта и там под это дело вставить аж целый css-класс, который будет отображать иконку в кнопке.

Но есть парочка «Но»…

1. Иконочных шрифтов нет.
2. Подгружать внешние файлы нельзя.
3. С помощью js/canvas/html рисовать нельзя.
4. Иконка должна быть масштабируемая.

Что делать? Как быть?

Вариант номер раз:

• Добавить в background-image и data ^[1]

Тут почти все хорошо… за исключением того, что нужно нашу svg прогонять через encoding (вот такой сервис ^[2])
и вместо красивого svg мы получаем
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%....2Fsvg%3E%0A

В результате получаем масштабируемую иконку ценой в 309 байт.

Теперь поясню некоторые моменты:

1. data:image/svg+xml — этим мы объясняем браузеру, что сейчас будем впихивать сюда inline-ресурс, который из себя представляет изображение в формате svg+xml
2. charset=utf-8 — штука вроде бы и не обязательная, но желательная (ибо фиг знает, что там у вас за кодировка, а svg/xml должны быть в utf-8)
3. в самом svg-коде должен присутствовать аттрибут xmlns=«www.w3.org/2000/svg ^[3]», без него не работает.

• Второй вариант, использовать псевдоэлементы ::before/after ^[4]

В content точно так же можно впихнуть url, а в него inline.

Единственный минус этого действа, цвет заливки нужно прописывать непосредственно в svg файле. Было бы неплохо, если бы работал currentColor или fill, но у меня не получилось заставить это работать.

Автор: Наташа

Источник ^[5]