Svg иконки в SPA?

Question

[lavezzi1]

Здравствуйте! Совсем недавно начал понимать и работать с single page apр, отсюда вопрос, как работать с svg иконками? Каким способом их лучше упаковывать?

Мне нравится такой подход:

определяете все иконки внутри тега в SVG, но скрываете их. Затем обращаетесь к каждому, когда это потребуется, используя элемент , ссылаясь на с xlink:href="#id"

Но как он будет работать в SPA?

–Веб шрифт не предлагать, плиз.
–Самое главное что нужно - это доступ к изменению этой свгэшки. Ховер все такое.

Comments

[TheBububo]

Ну а в чем собственно проблема? Можно и так как вы описали в вопросе. Вы не нашли плагин для вебпака или что?

Answer 1

[lnked]

Написал для этого гулп плагин который делает вставку и обработку за меня svgstore

Answer 2

[Nikolay Talanov]

SVG не поддерживает динамическое изменение xlink:href аттрибута, по-этому для таких иконок надо писать отдельный мини-компонент, который будет просто динамически вставлять элемент с линком внутри в страницу. Так по итогам даже проще будет, ибо вы сможете присобачить кучу своих кастомных аттрибутов к этому компоненту, чтобы потом все это дело легко стилизовать, не заставляя себя на каждом шагу запихивать убогую конструкцию в виде

<svg>
  <use blah blah>
</svg>

Ну и для поддержки ИЕ9+ юзайте это https://github.com/Keyamoon/svgxuse (просто подключили на страницу и все работает).

Тут вот статья по иконкам в реакте - https://www.sitepoint.com/a-working-svg-workflow-f...
В ней в комментах имеется описание моего подхода (особенно пункт 4) - https://www.sitepoint.com/a-working-svg-workflow-f...

Answer 3

[qtuz]

Посмотрите в сторону svg-sprite-loader.