Да, с помощью Gulp.js и плагина gulp-svg-sprite вы можете создать сниппет или миксин для автоматического добавления пути к спрайту в HTML-коде при работе в среде разработки VS Code.
1. Установите Gulp.js и плагин gulp-svg-sprite, если вы ещё не установили:
npm install --global gulp-cli npm install --save-dev gulp gulp-svg-sprite
2. Создайте файл gulpfile.js в корневой папке вашего проекта и добавьте следующий код:
const gulp = require('gulp'); const svgSprite = require('gulp-svg-sprite'); gulp.task('sprites', function () { return gulp.src('path/to/svg/files/*.svg') .pipe(svgSprite({ mode: { symbol: { dest: '', sprite: 'sprite.svg' } }, svg: { xmlDeclaration: false, doctypeDeclaration: false } })) .pipe(gulp.dest('path/to/destination/folder')); }); gulp.task('default', gulp.series('sprites'));
3. Замените 'path/to/svg/files/*.svg' на путь к вашим SVG-файлам, которые вы хотите объединить в спрайт.
4. Замените 'path/to/destination/folder' на путь к папке, в которую вы хотите сохранить полученный спрайт.
5. Запустите команду gulp в терминале или командной строке в папке вашего проекта.
6. Зайдите в VS Code и откройте файл, где вы хотите использовать спрайт SVG.
7. Создайте сниппет или миксин с нужным вам кодом для добавления пути к спрайту в HTML. Например, сниппет для добавления спрайта в виде <svg> элемента может выглядеть так:
{ "Add Sprite": { "prefix": "addSprite", "body": [ "<svg class="icon" aria-hidden="true"><use xlink:href="$1"></use></svg>" ], "description": "Adds SVG sprite" } }
8. Сохраните изменения и теперь вы можете использовать созданный сниппет или миксин в VS Code для автопрописывания пути к спрайту в HTML-коде.
В результате вы сможете быстро и легко добавлять путь к спрайту SVG в VS Code с помощью созданного сниппета или миксина, что сэкономит ваше время и упростит процесс разработки.