Как правильно во vue вставить svg?

Question

[FilatovNikita]

Подскажите как мне использовать во vue.js svg иконки чтобы например я вставлял иконку и по нажатию я мог бы изменить через css (или через еще что-нибудь) ее цвет.

Каким лучше способом вставлять svg изображения в таком случае?

Многие изображения я вставляю просто через тэг img, но при таком подходе никак модифицировать ее потом нельзя. Вставлять весь svg код в компонент это очень громоздко получается. Видел что вставляют через тэг object еще, но по ощущениям все это кривенько выглядит.

Может здесь использовать какое-то svg loader для вебпака?

Видел еще рекомендуют использовать для этого спрайты или какие-то отдельные vue компоненты.

Со всеми этими многочисленными способами я уже запутался.

Так какой использовать в идеале для vue проекта.

Если можно то с примером какой нибудь иконки для кнопки. Заранее спасибо.

Answer 1

[Владимир Сартаков]

Независимо от стека технологий:
Для разноцветных иконок, подойдет только 2 технологии:
inline svg
svg symbol sprite
- У обоих есть недостатки, но рабочиие. Все остальные подходы - вообще шлак.

Для одноцветных svg иконок, подходит генерация шрифтов из иконок.

Мне ближе svg symbol sprite: (не работают svg градиенты, некоторые не правильно сохраненные иконки могут сломать весь спрайт)
Причем меня устраивает, только когда кидаю иконки в определенную папку и она автоматом попадает в спрайт, то есть сразу могу ее использовать. Есть плагины для которых нужно делать import каждой иконки, перед использованием - они легко ставятся и настраиваются, но жутко не удобны

Модуль для nuxt:
https://github.com/nuxt-community/svg-sprite-module
* Может не работать с другими модулями для свг...

Vue cli:
https://github.com/swisnl/vue-cli-plugin-svg-sprite
* Не проверял, но вроде то что надо

Comments

[FilatovNikita]

Спасибо большое!

Answer 2

[Kovalsky]

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