@nikolay_akhmetyanov
Front-end developer

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

Добрый день!

Есть 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/'));
});
  • Вопрос задан
  • 402 просмотра
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега Gulp.js
frontend developer
Многоцветные, как правило, не нуждаются в изменении цветов через css. Но иногда бывает.

Я в своих иконках использую только заливку (без обводки). Это немного упрощает управление.
Удаляю атрибуты заливки только черным цветом
$('[fill="#000"]').removeAttr('fill');
$('[fill="#000000"]').removeAttr('fill');

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы