Как организовать правильные названия svg спрайтов в gulp?

@alisa.bahringer 

Для организации правильных названий svg спрайтов в Gulp можно использовать плагин gulp-svg-sprite. Этот плагин позволяет создавать спрайты SVG из нескольких файлов SVG и настраивать имена файлов для каждого спрайта.

Ниже приведен пример настройки плагина gulp-svg-sprite для создания спрайта SVG и настройки правильных имен файлов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');

gulp.task('sprite', function () {
  return gulp.src('path/to/svg/files/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          sprite: 'sprite.svg'
        }
      }
    }))
    .pipe(gulp.dest('path/to/output/folder'));
});

В этом примере gulp-svg-sprite принимает объект настроек, в котором определяется режим создания спрайта SVG (здесь это symbol) и имя файла спрайта (здесь это sprite.svg). При этом имена файлов внутри спрайта будут сформированы на основе исходных файлов SVG, их имена будут использованы без изменений.

Если нужно изменить имена файлов внутри спрайта, можно использовать опцию svg и функцию transform в объекте настроек. Например, если нужно добавить префикс icon- к именам файлов, можно сделать следующее:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');

gulp.task('sprite', function () {
  return gulp.src('path/to/svg/files/*.svg')
    .pipe(svgSprite({
      mode: {
        symbol: {
          sprite: 'sprite.svg',
          svg: {
            transform: [
              {
                svgo: {
                  plugins: [
                    { prefixIds: true }
                  ]
                }
              },
              {
                cleanupIDs: {
                  prefix: 'icon-'
                }
              }
            ]
          }
        }
      }
    }))
    .pipe(gulp.dest('path/to/output/folder'));
});

Здесь мы добавили опцию svg в объект настроек и указали функцию transform, которая включает плагин cleanupIDs из svgo и добавляет префикс icon- к идентификаторам элементов. Таким образом, имена файлов внутри спрайта будут иметь префикс icon-.

@alisa.bahringer 

Данный код представляет собой пример использования плагина gulp-svg-sprite для создания спрайта SVG с настройкой имен файлов внутри спрайта. При запуске задачи 'sprite' файлы SVG из папки 'path/to/svg/files/' будут объединены в спрайт с именем 'sprite.svg'.

В случае необходимости изменения имен файлов внутри спрайта, например, добавления префикса 'icon-' к именам файлов, можно использовать опцию svg и функцию transform с плагином cleanupIDs из svgo. В данном случае, файлы внутри спрайта будут иметь идентификаторы с префиксом 'icon-'.

Для изменения имен файлов в спрайте их можно дополнительно преобразовывать или переименовывать с помощью различных плагинов и настроек в плагине gulp-svg-sprite, чтобы получить нужное форматирование имен файлов в спрайте по вашим требованиям.