How to Replicate svg designs for a react app
Hey guys,I’m following a design where I need to add these “color waves” into the app.
1) is there a way/tool I can use in order to replicate these svg designs and then add them to my components using the ‘svg’ element?
2)is it good practice to just import the svg files and then use them in image tags?
Thanks!
12 Replies
doesn't react just use xml without any changes?
with jsx/tsx?
thanks for the reply,to be honest I dont know much about svgs in general?
I can just use an <svg> tag?
you can, but svgs tend to get big
what you can do is have a component that has the svg icons with <symbol> tags
each symbol has an id, and the content inside is what you would put in an svg tag
then, create another component that generates the <svg><use> tags
the <use> tag lets you use an svg symbol as part of it's contents
so, in the href attribute you put
#id-comes-here
this way, you can repeat the icon anywhere
or use something premade thst does this for youSo for react , would you have to import the complement <symbol> that contains the paths anywhere you want the component <use> ?
no, you can just use the component (say, you call it "symbol")
For example, you create an
SvgSymbol component that takes an id attribute
the component just needs to have something like this:
or something like that
then you can use the component like this: <SvgSymbol id="some-id" />
or something like that
and on the body, you add the "master" svg with all the <symbol> tagsBut the component that contains the actual paths in the
<symbol>, that is given the id=some-id; won't it need to be imported for the component that uses <use href=#some-id/> to have access to the path data ? Otherwise it wont exist anywhere but as a component right?no, it just needs to be in the html somewhere else
Oh I see you said to put the symbol + path in the body , I was still thinking it would be a react component like you said initially and wasn’t sure how the component with the <use> would get access to it.
What’s the advantage of this approach versus putting the path data into a file under assets and referencing it from there ? Besides the styling advantage of course. Esp if you’re using a sprite and it’s a large amount of data you don’t want cluttering up the body
well, it very very very very quickly bloats the html with repeats of the symbols, if you use those more than once
also, makes it super easy to change the symbols without hunting for where they are in the code
imagine you find a new arrow icon, and you use it in multiple places
now, you need to find it everywhere vs changing the contents of the <symbol>
I mean you would have the SVG in one place but it’s in a file instead of pasted into the body
So you could change the contents in one place still
It really comes down to how you want the load to happen. If its a repeated component in the html it can increase that size of the component and has to recache every page its used.
You can <use> a file path too, which would cache the file one time first used, then use that cached file after that.
That means even if the symbol is not reused the file is already cached for every other one.
yeah, you don't have to have the symbols in the html
i always forget that