Обращение к SVG спрайту через #?

Для обращения к SVG спрайту через # в Gulp.js можно использовать плагин gulp-svgstore. Этот плагин позволяет собрать все SVG файлы в единый спрайт, который затем можно использовать для обращения к каждому SVG файлу через URL с использованием #.

Для начала, установите плагин gulp-svgstore с помощью npm:

npm install gulp-svgstore --save-dev

Затем, добавьте следующий код в ваш Gulpfile.js:

const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const rename = require('gulp-rename');

gulp.task('svgstore', function () {
    return gulp
        .src('path/to/svgs/*.svg') // указываем путь к SVG файлам
        .pipe(svgstore()) // собираем SVG файлы в спрайт
        .pipe(rename('sprite.svg')) // переименовываем спрайт, если нужно
        .pipe(gulp.dest('path/to/destination')); // указываем путь для сохранения спрайта
});

Здесь мы создаем новую задачу в Gulp с именем 'svgstore'. Эта задача берет все SVG файлы из указанной директории (вам нужно будет заменить 'path/to/svgs/'), собирает их в спрайт с помощью метода svgstore(), затем, если нужно, переименовывает спрайт с помощью метода rename(), и наконец сохраняет спрайт в указанной целевой директории (замените 'path/to/destination' соответствующим путем).

Чтобы использовать спрайт SVG в HTML, вы можете добавить следующий код:

<svg>
    <use xlink:href="path/to/destination/sprite.svg#icon-name"></use>
</svg>

Вместо path/to/destination/sprite.svg укажите путь к вашему спрайту, а вместо icon-name укажите имя соответствующего SVG файла из спрайта.

Таким образом, вы можете обращаться к каждому SVG файлу в спрайте через URL с использованием #. Это удобно при работе с множеством SVG файлов, так как позволяет легко добавлять и управлять иконками на веб-странице с помощью спрайтов.