Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS.
К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы хотите, чтобы цвет векторной иконки тоже поменялся согласно палитре брендовых цветов.
Но давайте обо всем по порядку.
У нас есть SVG изображение, к примеру иконка увеличительного стекла для кнопки поиска на сайте:
|
1 2 3 |
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="#FFA38B" fill-rule="nonzero" d="M23.792 22.776l-5.833-5.832a10.19 10.19 0 0 0 2.512-6.71C20.471 4.586 15.878 0 10.236 0 4.588 0 0 4.592 0 10.233c0 5.641 4.593 10.234 10.236 10.234 2.565 0 4.912-.948 6.711-2.512l5.834 5.832a.723.723 0 0 0 .506.213.72.72 0 0 0 .506-1.224zM1.432 10.233c0-4.853 3.95-8.796 8.798-8.796 4.854 0 8.799 3.948 8.799 8.796 0 4.848-3.945 8.802-8.799 8.802-4.849 0-8.798-3.949-8.798-8.802z"/> </svg> |
Используя один из онлайн сервисов преобразования картинок в инлайн CSS (а я использовал вот этот — https://websemantics.uk/tools/svg-to-background-image-conversion/), получаем примерно следующий код (я опускаю данные многоугольника) :
|
1 |
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFA38B' fill-rule='nonzero' d='...'/%3E%3C/svg%3E"); |
Допустим далее, что в вашем less шаблоне определена переменная, задающая брендовый (основной) цвет для всего шаблона:
|
1 |
@brand-primary: #FFA38B; |
Было бы удачно подставить его в SVG картинку, чтобы при изменении переменной и цвет картинки тоже менялся. Тут нам пригодиться сложение строк, описанное здесь.
Но есть две небольшие особенности:
- кавычки, обрамляющие «data:image/…» — часть строки;
- значение цвета нужно преобразовать, используя urlencode.
Для это вводим две переменные в LESS:
|
1 2 3 4 |
// символ двойной кавычки @qoutechar: '"'; // урл-кодированное значение цвета @escaped-brand-primary: escape(@brand-primary); |
Теперь можно выполнить все подстановки, в код SVG изображения:
|
1 |
background-image: url("@{qoutechar}data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='@{escaped-brand-primary}' fill-rule='nonzero' d='...'/%3E%3C/svg%3E@{qoutechar}"); |
