# parcel-plugin-svg-react

Parcel plugin for SVGR. Forked from <a href="https://github.com/gregberge/svgr/tree/master/packages/parcel-plugin-svgr">**@svgr/parcel-plugin-svgr**</a>.

```
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`!

```jsx
import Star from './star.svgr'

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

## Usual Behavior

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

```jsx
import star from './star.svg'

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

## CSS Imports

This works as well:

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


Import SVG as React components (Parcel plugin). 

parcel-plugin-svg-react

Import SVG as React components (Parcel plugin)

parcel-plugin-svg-react

parcel-plugin-svg-react

The Differences

React Imports

Usual Behavior

CSS Imports

Keywords