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!

Top-right.svg6.57KB

Bottom-left.svg6.39KB

Ἔ

ἔρως•9/27/24, 7:27 AM

doesn't react just use xml without any changes?

Ἔ

ἔρως•9/27/24, 7:27 AM

with jsx/tsx?

Ἔἔρως doesn't react just use xml without any changes?

arjarius98OP•9/27/24, 8:09 AM

thanks for the reply,to be honest I dont know much about svgs in general?
I can just use an <svg> tag?

Ἔ

ἔρως•9/27/24, 9:22 AM

you can, but svgs tend to get big

Ἔ

ἔρως•9/27/24, 9:22 AM

what you can do is have a component that has the svg icons with <symbol> tags

Ἔ

ἔρως•9/27/24, 9:23 AM

each symbol has an id, and the content inside is what you would put in an svg tag

Ἔ

ἔρως•9/27/24, 9:23 AM

then, create another component that generates the <svg><use> tags

Ἔ

ἔρως•9/27/24, 9:24 AM

the <use> tag lets you use an svg symbol as part of it's contents

Ἔ

ἔρως•9/27/24, 9:24 AM

so, in the href attribute you put

Ἔ

ἔρως•9/27/24, 9:24 AM

this way, you can repeat the icon anywhere

Ἔ

ἔρως•9/27/24, 9:25 AM

or use something premade thst does this for you

Ἔἔρως then, create another component that generates the <svg><use> tags

curiousmissfox•9/27/24, 11:06 PM

So for react , would you have to import the complement <symbol> that contains the paths anywhere you want the component <use> ?

Ἔ

ἔρως•9/27/24, 11:16 PM

no, you can just use the component (say, you call it "symbol")

Ἔ

ἔρως•9/27/24, 11:16 PM

For example, you create an component that takes an

id

id

attribute

Ἔ

ἔρως•9/27/24, 11:18 PM

the component just needs to have something like this:

Ἔ

ἔρως•9/27/24, 11:18 PM

or something like that

Ἔ

ἔρως•9/27/24, 11:19 PM

then you can use the component like this:

Ἔ

ἔρως•9/27/24, 11:19 PM

or something like that

Ἔ

ἔρως•9/27/24, 11:19 PM

and on the body, you add the "master" svg with all the tags

curiousmissfox•9/28/24, 12:42 PM

But the component that contains the actual paths in the , that is given the ; won't it need to be imported for the component that uses to have access to the path data ? Otherwise it wont exist anywhere but as a component right?

Ἔ

ἔρως•9/28/24, 3:22 PM

no, it just needs to be in the html somewhere else

curiousmissfox•9/28/24, 6:21 PM

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

Ἔ

ἔρως•9/28/24, 6:30 PM

well, it very very very very quickly bloats the html with repeats of the symbols, if you use those more than once

Ἔ

ἔρως•9/28/24, 6:31 PM

also, makes it super easy to change the symbols without hunting for where they are in the code

Ἔ

ἔρως•9/28/24, 6:33 PM

imagine you find a new arrow icon, and you use it in multiple places

Ἔ

ἔρως•9/28/24, 6:33 PM

now, you need to find it everywhere vs changing the contents of the <symbol>

Ἔἔρως now, you need to find it everywhere vs changing the contents of the <symbol>

curiousmissfox•9/28/24, 7:42 PM

I mean you would have the SVG in one place but it’s in a file instead of pasted into the body

curiousmissfox•9/28/24, 7:42 PM

So you could change the contents in one place still

b1mind•9/28/24, 8:24 PM

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.

b1mind•9/28/24, 8:24 PM

That means even if the symbol is not reused the file is already cached for every other one.

Ἔ

ἔρως•9/29/24, 12:02 AM

yeah, you don't have to have the symbols in the html

Ἔ

ἔρως•9/29/24, 12:02 AM

i always forget that