parcel-plugin-svg-react

parcel-plugin-svg-react

Parcel plugin for SVGR. Forked from @svgr/parcel-plugin-svgr.

npm install parcel-plugin-svg-react

The Differences

• .svgr extension for React imports
• .svg extension for path imports
• Allows CSS imports

React Imports

Allows to import SVG files as React components. The extension should be .svgr, not .svg!

import Star from './star.svgr'

const App = () => (
  <div>
    <Star />
  </div>
)

Usual Behavior

Allows to import .svg files as paths (the usual Parcel behavior):

import star from './star.svg'

const Star = () => (
  <div style={{ backgroundImage: `url(${ star })` }}></div>
)

CSS Imports

This works as well:

div {
  background-image: url(./star.svg);
}