3 ms·
One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags. I dunno specifica
by Waterluvian 3y ago
One of the things that kinda clicked for me recently was learning that I can inline SVG tags in a react application as if they were JSX tags.
I dunno specifically if that’s first class or webpack is covering it, but it really feels good in a few cases to make an SVG component with some logic built in. So now I can have an SVG and some react-driven logic modifies its shape, colour, omitting sections of it, etc.
- rahimnathwani 3y agoThis is good for simple SVGs, or cases where you will have many variations. But when you online SVG code, the browser can't cache the image. So if the SVGs are larger, or have only a few variations, you may prefer to have a separate endpoint for each image variant. https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884c28d36 https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
- Waterluvian 3y agoYep! As always, there’s both pros and cons to a programming approach and a necessity to understand them.
- solardev 3y agoYeah, I've seen React pages where a tiny icon (like a little star) is inlined a hundred times on the same page. That's a lot of extra bytes :( At least if they're in the same JSX component, the server can gzip that SVG string so it's not as big over the wire. But if the same icon gets used in different pages, the costs multiply. It's nice to have the OPTION of treating SVG as code when you want it to be code, but otherwise, it's better for the user to treat it as a graphic and let the usual caching mechanisms (server+browser) do their jobs.
- HunorBorbely 3y agoYes, since HTML5 you can inline an SVG. You don't need Webpack or anything like that, it just works. One of the examples in this tutorial is also a data-driven diagram generated from React. You can do pretty cool things by combining the two.