CODEWITHSUNDEEP
reactjswebpackwebpack-file-loader
s.d.fard
s.d.fard

Reputation: 301

How use both webpack "file-loader" and "@svgr/webpack" (or svg-inline-loader)

I want the option to use both: exp->

import 'res/image.svg'
import myicon from 'res/icon.svg'

//in function
<img src='image.svg'/> //creat by webpack file-loader
<SvgIcon component={myicon}  viewBox="0 0 600 476.6"/> //creat by svgr/webpack

Webpack config: (doesn't work, because of image.svg)

{test: /\.(svg|png|jpg|gif)$/,
     use: {loader: "file-loader"}
 },
 {test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    },

Upvotes: 2

Views: 2807

Answers (1)

slumbering
slumbering

Reputation: 111

remove svg extension from your file-loader

it should look like this :

{
    test: /\.(png|jpg|gif)$/,
    use: {loader: "file-loader"}
},
{
    test: /\.svg$/,
    use: ['@svgr/webpack', 'url-loader'],
}

Then you can import this way for components :

import { ReactComponent as MyIcon} from 'res/icon.svg'

<SvgIcon component={MyIcon}  viewBox="0 0 600 476.6"/>

And this way to get the url:

import myIcon from 'res/icon.svg'

<img src={myIcon} />

Upvotes: 3

Related Questions