How to include/use/import svg to react

Question

I have read this post, but it didn't solve my issue:

In my case, the svg file is enormous which makes it impossible to edit. I tried some npm modules but all of them are not compatible with my react-dom version (^15.4.1).

I tried also an optimiser which is supposed to strip down some of the useless for react metatags.

Is there any workaround?

have you tried https://github.com/atomic-app/react-svg library? It worked for me. — bognix, Feb 24 '17 at 14:58
see if something from this thread would help you - http://stackoverflow.com/questions/20764881/why-does-npm-install-say-i-have-unmet-dependencies — bognix, Feb 24 '17 at 16:11
Nice one but: There is another problem which is out of this scope. Point is I was sent a tar with the node modules and a package.json... npm install breaks everything. But using the tar it works. So npm install is out of the discussion. On the other hand, other additional modules where installed successfully. Anyway, out of scope.. — StLia, Feb 24 '17 at 17:19

score 0 · Answer 1 · edited Apr 28 '23 at 12:10

There are several ways to use svg files in React:

1.

import {ReactComponent as MySvgFile} from './path/mysvgfile.svg'

and use its as <MySvgFile /> inside return statement.

2.

import MySvgFile from './path/mysvgfile.svg'

and use it as

<img src={MySvgFile} alt="img" />

Problem with 1st method is that all the code of svg file will be embedded in our react project (on the initial load), causing increase in bundle size. 2nd method is the best approach, as it will fetch the svg from bundle through network when it is required (not on initial load). Hence, bundle will not contain the code of svg file.

How to include/use/import svg to react

1 Answers1

1.

2.