Load an svg file without modifying webpack in react

Question

I am using create-react-app, and antd.

I have a big file mdi.svg containing a lot of icons I am using on another app. I would like to import that svg file and use those icons in antd.

Is there a way to import an svg file and use it without modifying webpack? We didn't eject our webpack, and my superior are not really ok for customizing it.

But most of the solution I found on the internet require adding a loader in the webpack.

EDIT: I react-app-rewired and it works great, but is it possible to load svg as a single file? or do I have to split all the svg in different files?

Answer 1

Not sure if it fits your case, but you can import SVG like this:

import { ReactComponent as MySvgFile } from './my_svg_file.svg'
...
const MyComponent = () => {
  return (
    <MySvgFile />
  )
}