Search code examples
javascriptreactjstypescriptjsxtsx

Can't load image from svg on React.js

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?

Solution

  • 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});