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

Пользователь

от alisa.bahringer , в категории: JavaScript , 9 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от montana_hand , 7 месяцев назад

@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-.