The Issue
I was working to load image from svg(Scalable Vector Graphics) file on React. I tried a few solution ways and I didn’t received any result. Those are solutions that have been tried:
Solution – 1
<img src="../../assets/icons/branch.svg" alt="branch" />
Firstly, I was reading many articles and seen this way: Directly set source to svg. But that didn’t work.
Solution – 2
<i className="branch">:</i>
.branch { background-image: url('../../assets/icons/branch.svg'); }
Secondly, I tried use to background image and that didn’t work.
Solution – 3
<object type="image/svg+xml" data="../../assets/icons/branch.svg" aria-label="branch"> Image </object>
Thirdly, I tried use to object and that didn’t work.
Solution 4
When i was trying to use as an in-line svg, it works. But i don’t like it, i wanna use that svg as external.
Finally
I tried those ways and only in-line way works. Can someone help me to use that svg as external?
Advertisement
Answer
You can also try this
import { ReactComponent as Branch } from "../../assets/icons/branch.svg";
and then use it like
<Branch/>
or
import Branch from "../../assets/icons/branch.svg";
background-image: url(${Branch});