2 ms·
I love adding my svg as react components, actually. It makes it easy to conditionally toggle parts of it, change text, manage colors, etc. Of course, if you ju
by oelmekki 9y ago
I love adding my svg as react components, actually. It makes it easy to conditionally toggle parts of it, change text, manage colors, etc.
Of course, if you just want to use the svg doc as a static icon, then yes by all mean, a plain file will do. But given the (very small) size of a svg file, caching it as a single resource may not be that useful.
- andreasklinger 9y agoagree most people who do inline styles (or any form of "my styling is written in the react file") do this afair we inline for the same reason i hope someone writes a good precompiler that allows efficient using def/use for (non changed) static inlining http://www.svgbasics.com/defs.html http://www.svgbasics.com/defs.html
- iamleppert 9y agoUmm, you should be doing that with CSS. Basically what this means is whenever your application code changes, it busts the cache on all your SVG assets if you use this method. The only use-case for using SVG with something like react is for data visualization where you are programmatically building up and updating a SVG DOM based on some data. A good example of this is a flow-chart graph/tree UI done in SVG that is generated from a nested data structure. Its unlikely these elements would be expressed as static assets in the first place. Even still I would be cautious in using SVG in this way for all but the least trivial things, as react has been optimized to diff HTML structures, not SVG. I'd like to see, for example, how it handles SVG cascade transforms for instance. Its usually not efficient to alter the SVG DOM by inserting/removing nodes, because the layout rules and semantics of SVG is different than HTML.