Работа с SVG-спрайтами «Чертоги Фрилансера» v3.0.0

Работа с SVG-спрайтами «Чертоги Фрилансера» v3.0.0

В шаблоне «Чертоги Фрилансера» v3.0.0 можно автоматически создавать SVG-спрайты.

Создание SVG-спрайта

Для этого следует скопировать отдельные SVG иконки в папку src/svgicons (если нет такой папки, нужно ее создать). Далее запускаем команду в терминале npm run sprite

Создавать SVG-спрайт следует до вызова команды npm run dev

После выполнения команды отдельные иконки SVG соберутся в единый файл (спрайт) src/img/icons/icons.svg

Если набор отдельных иконок в папке src/svgicons изменился, повторите команду npm run sprite

Использование SVG-спрайта

Каждой иконке в общем файле (спрайте) будет предоставлен уникальный ID, состоящий из строки svg-имя-файла-иконки . К примеру, если имя файла отдельной иконки было list.svg, то ID будет svg-list. Итак, вывести необходимую иконку в нужном месте можно с помощью кода:

<svg>
	<use xlink:href="@img/icons/icons.svg#svg-list"></use>
</svg>
Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Что будем искать? Например,Человек

Мы в социальных сетях