Rollup
SVGR can be used as a rollup plugin, this way you can import your SVG directly as a React Component.
Install
npm install @svgr/rollup --save-dev# or use yarnyarn add @svgr/rollup --dev
Usage
In your rollup.config.js
:
const svgr = require('@svgr/rollup').default{plugins: [svgr()]}
In your code:
import Star from './star.svg'const App = () => (<div><Star /></div>)
Passing options
{plugins: [svgr({ native: true })]}
url
plugin
Using with It is possible to use it with url
.
In your rollup.config.js
:
{plugins: [url(), svgr()]}
In your code:
import starUrl, { ReactComponent as Star } from './star.svg'const App = () => (<div><img src={starUrl} alt="star" /><Star /></div>)
The named export defaults to ReactComponent
, but can be customized with the namedExport
option.
Use your own Babel configuration
By default, @svgr/rollup
applies a babel transformation with optimized configuration. In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying babel: false
in options.
{plugins: [svgr({ babel: false })]}