Как правильно собрать спрайты svg в gulp?

Question

[Николай]

Добрый день!

Есть svg иконки. Одноцветные и многоцветные. Необходимо собрать их в спрайт и сохранить доступ редактирования цвета через css. С одноцветными все понятно, а как быть с многоцветными?

gulp.task('svgSpriteBuild', function () {
	return gulp.src('app/img/icon-svg/**/*.svg')
	// minify svg
		.pipe(svgmin({
			js2svg: {
				pretty: true
			}
		}))
		// remove all fill, style and stroke declarations in out shapes
		.pipe(cheerio({
			run: function ($) {
				$('[fill]').removeAttr('fill');
				$('[stroke]').removeAttr('stroke');
				$('[style]').removeAttr('style');
			},
			parserOptions: {xmlMode: true}
		}))
		// cheerio plugin create unnecessary string '>', so replace it.
		.pipe(replace('>', '>'))
		// build svg sprite
		.pipe(svgSprite({
			mode: {
				symbol: {
					sprite: "../sprite.svg",
					render: {
						scss: {
							dest:'../../../../dev/sass/_sprite-svg.scss',
							template: 'dev/sass/templates/_sprite_template.scss'
						}
					}
				}
			}
		}))
		.pipe(gulp.dest('app/img/sprite/'));
});

Answer 1

[Сергей delphinpro]

Многоцветные, как правило, не нуждаются в изменении цветов через css. Но иногда бывает.

Я в своих иконках использую только заливку (без обводки). Это немного упрощает управление.
Удаляю атрибуты заливки только черным цветом

$('[fill="#000"]').removeAttr('fill');
$('[fill="#000000"]').removeAttr('fill');

Черный - это дефолтный цвет и он не нужен, только мешает переопределению в css.
Всё, что не черное — цветное, и попадает в спрайт как есть.
Базовый стиль для заливки иконок
fill: currentColor
думаю, понимаете, в чем сила.

Особые иконки, в том числе многоцветные, требующие нестандартного поведения или управления цветом, правятся вручную — элементы группируются и им назначаются отдельные классы, с помощью которых происходит переопределение свойств в css.

Comments

[Николай]

Спасибо!
Хочу удалить атрибуты только у одноцветных следующим способом. Но почему-то он не работает( Не подскажете в чем дело?

.pipe(cheerio({
      run: function ($) {
        $('symbol[id^="mono"] [fill]').removeAttr('fill');
        $('symbol[id^="mono"] [stroke]').removeAttr('stroke');
        $('symbol[id^="mono"] [style]').removeAttr('style');
      },
      parserOptions: {xmlMode: true}
    }))

[Сергей delphinpro]

Николай, когда вы передаете иконку в cheerio там все еще исходный svg код, нет символов. Поэтому селектор не работает.
Наверное надо svg[...] [fill] или просто [id^="mono"] [fill]

[Николай]

Сергей delphinpro, Наверное надо svg[...] [fill] или просто [id^="mono"] [fill] - все равно не сработало, я попробовал сначала собрать спрайт а потом в cheerio удалил по селектору [id^="mono"] [fill]. И сработало! Спасибо