how to set up an inline svg with webpack

Question

I am wondering how to set up an inline svg with webpack?

I am following the react-webpack-cookbook.

I have my webpack.config set up correc

Answer 1

@svgr/webpack (npm) is the inline svg loader that create-react-app uses.

Add the rule to your webpack config:

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

Then you can import svgs as React components:

import Star from './star.svg'

const App = () => (
  

    
  
)