vite-plugin-react-svg

Extend Vite with ability to use SVG files as React components.

$3

- SVGO optimization
- SVGR customization
- Hot Module Replacement support
- Support for ?url and ?component query string

#### Currently supported Vite version:

2.0.0-beta.61

$3

``bash
yarn add --dev vite-plugin-react-svg

npm i -D vite-plugin-react-svg
`

$3

`js
// vite.config.js
const reactRefresh = require('@vitejs/plugin-react-refresh');
const reactSvgPlugin = require('vite-plugin-react-svg');

module.exports = {
plugins: [
reactRefresh(),
reactSvgPlugin(),
],
};
`

#### Options

`js
reactSvgPlugin({
// Default behavior when importing .svg files, possible options are: 'url' and component
defaultExport: 'url',

// Boolean flag to enable/disable SVGO
svgo: true,

// SVGO configuration object
svgoConfig: {},

// Props to be forwarded on SVG tag, ossible options: "start", "end" or false
expandProps: 'end',

// Setting this to true will forward ref to the root SVG tag
ref: false,

// Setting this to true will wrap the exported component in React.memo
memo: false,

// Replace an attribute value by an other.
// The main usage of this option is to change an icon color to "currentColor" in order to inherit from text color.
// replaceAttrValues: { old: 'new' },
replaceAttrValues: null,

// Add props to the root SVG tag
// svgProps: { name: 'value' },
svgProps: null,

// Add title tag via title property
// =>
// =>
titleProp: false,
})
`

$3

`jsx
import MyIcon from './svgs/my-icon.svg?component';

function App() {
return (



);
}
``