parcel-plugin-svg-react

Import SVG as React components (Parcel plugin)

Usage no npm install needed!

<script type="module">
  import parcelPluginSvgReact from 'https://cdn.skypack.dev/parcel-plugin-svg-react';
</script>

README

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);
}