The best practice for redirect import a SVG file in the React App

This is the way to redirect import a SVG file in the React app,

In your code it would look like this:




In the code above, the ReactComponent import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename

Note: this feature is available with react-scripts@2.0.0 and higher, and react@16.3.0 and higher.

- Make sure work well without any error, you have to add babel-plugin-inline-react-svg

yarn add babel-plugin-inline-react-svg -D


In .babelrc file:

{
  "presets": [
    ....
  ],
  "plugins": [
    "inline-react-svg"
  ]
}


© 2019 4codev

Created with love by Sil.