Svg icons in SPA?

Question

JavaScript

Hello! More recently, I began to understand and work with single page app, hence the question, how to work with svg icons? What is the best way to pack them?
I like this approach:

define all the icons inside the tag in SVG, but hide them. Then refer to each when needed using the element, referencing with xlink:href="#id"

But how will it work in SPA?
– Do not offer a web font, pliz.
-The most important thing you need is access to change this swgeshki. Hover is all that.

Answer 1

I wrote a gulp plugin for this that does the insertion and processing for me svgstore

Answer 2

another option is base64

Answer 3

SVG does not support dynamic change of the xlink:href attribute, so for such icons you need to write a separate mini-component that will simply dynamically insert an element with a link inside into the page. So, according to the results, it will be even easier, because you can attach a bunch of your custom attributes to this component, so that later the whole thing can be easily styled, without forcing yourself at every step to stuff a wretched design in the form

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

Well, for IE9+ support, use this https://github.com/Keyamoon/svgxuse (just plugged into the page and everything works).
Here is an article on icons in React - https://www.sitepoint.com/a-working-svg-workflow-f...
It contains a description of my approach in the comments (especially point 4) - https://www. sitepoint.com/a-working-svg-workflow-f...

Answer 4

Look towards svg-sprite-loader .