В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) есть возможность работать с SVG-спрайтом.
Чтобы создать SVG-спрайт, выполните следующие действия:
- В настройках ЧФ4 включите создание SVG-спрайта (images->svgsprite: true)
- Разместите SVG-иконки в папке src/assets/svgicons
- Запустите режим разработчика npm run dev
Использование SVG-спрайта
Для вывода иконки из спрайта в HTML в режиме разработчика вы можете воспользоваться одним из двух способов
Вывод с помощью тега <use> (можно использовать usvg снипет ):
<svg><использовать xlink:href="__spritemap#sprite-fb_icon"></использовать> </svg>
Или тег <img> (можно использовать usvgi снипет ):
<img src="__spritemap#sprite-fb_icon-view" alt="Изображение">
Где fb_icon это название файла иконки. Обратите внимание, что в варианте вывода с помощью тега <img> к имени иконки добавляется суффикс -view
Для вывода инокны из спрайта в SCSS в режиме разработчика вы можете воспользоваться специальным миксином:
@include sprite("fb_icon");
Где fb_icon это название файла иконки. В результате будет выведено свойство background из url иконки без повторения по центру.