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

Question

[Вячеслав Лебедев]

Добрый вечер!
Уже пару часов ищу хороший плагин для gulp, чтобы было удобно собирать и использовать svg спрайт.
Штуки 3-4 перепробовал :( Все как то не так работает. Картинка есть, но масштабированию не поддается.
Подскажите что и как?
Спасибо! :)
ps: скорее всего я чего то не догоняю в работе с svg и как его использовать, что вероятнее всего :((
но очень хочу его использовать.
pss: помогите разобраться кто в курсе. :)

Answer 1

[Danila]

https://una.im/svg-icons/
отличная статья с подробными примерами, попробуйте повторить сборку, а что не получится - напишите, иначе не ясно в чем у вас проблема и с чем вам помочь.

Comments

[Вячеслав Лебедев]

с проблемами иконочных в курсе. спасибо :) буду вчитываться и пробовать. хочу почувствовать силу svg :))

[Вячеслав Лебедев]

Данила: уже приметил, спасибо)

[Вячеслав Лебедев]

Данила: буилтплэйта мне и не хватало с этим плагином :) куча настроек, а как его готовить правильно и чтобы было удобно не находил :( а тут все именно так, как мне нужно! :) спасибо огромное!!! :))

Answer 2

[outcastik]

вот мой конфиг. Использую режим symbol. В папку src кидаем svg. В папке out ищем html с примерами использования. Здесь подробнее

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

config                  = {
    shape               : {
        transform       : [
            {svgo       : {
                plugins : [
                    {removeUselessStrokeAndFill: true}
                ]
            }}
        ],

        dimension       : {         // Set maximum dimensions
            maxWidth    : 128,
            maxHeight   : 128
        }
    },
    mode                : {
        symbol: {
            example         : true
        }
    }

};




gulp.task('sprite', function () {
    gulp.src('src/**/*.svg')
        .pipe(svgSprite(config))
        .pipe(gulp.dest('out'));
});

gulp.task('default', ['sprite']);

Answer 3

[lfoma]

Предлагаю решение получше - сделать из вашего svg иконочный шрифт

Comments

[Вячеслав Лебедев]

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

[lfoma]

Недостатки иконочных шрифтов на практике:
- Нельзя использовать в качестве фона
- Нельзя использовать многоцветные иконки
Плюсы:
- Оптимизированный размер
- Удобная работа
- Возможность увеличить до любых размеров
- Возможность задать любой цвет
- Комбинации и трансформы иконок

[Вячеслав Лебедев]

lfoma: неа, недостатков по более будет :) svg еще меньше весит и лучше жмется, кастомизируется стилями, да еще и логику на него можно повесить :) это же одно удовольствие - работать с svg. обязательно попробуйте. буитплайт, что выше, шикарная вещь :)