Reputation: 301
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
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