https://github.com/pd4d10/vite-plugin-svgr

Vite plugin to transform SVGs into React components
https://github.com/pd4d10/vite-plugin-svgr

Last synced: 10 days ago
JSON representation

Vite plugin to transform SVGs into React components

• Host: GitHub
• URL: https://github.com/pd4d10/vite-plugin-svgr
• Owner: pd4d10
• License: mit
• Created: 2021-01-09T07:34:17.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-17T19:18:21.000Z (9 months ago)
• Last Synced: 2024-05-17T12:03:03.278Z (6 months ago)
• Language: TypeScript
• Size: 159 KB
• Stars: 485
• Watchers: 2
• Forks: 54
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• jimsghstars - pd4d10/vite-plugin-svgr - Vite plugin to transform SVGs into React components (TypeScript)

README

        
# vite-plugin-svgr

[![npm](https://img.shields.io/npm/v/vite-plugin-svgr.svg)](https://www.npmjs.com/package/vite-plugin-svgr)

Vite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.

## Installation

```sh

# npm

npm install --save-dev vite-plugin-svgr

# yarn

yarn add -D vite-plugin-svgr

# pnpm

pnpm add -D vite-plugin-svgr

```

## Usage

```js

// vite.config.js

import svgr from "vite-plugin-svgr";

export default {

  // ...

  plugins: [svgr()],

};

```

Then SVG files can be imported as React components:

```js

import Logo from "./logo.svg?react";

```

If you are using TypeScript, there is also a declaration helper for better type inference. Add the following to `vite-env.d.ts`:

```ts

/// 

```

### Options

```js

svgr({

  // svgr options: https://react-svgr.com/docs/options/

  svgrOptions: {

    // ...

  },

  // esbuild options, to transform jsx to js

  esbuildOptions: {

    // ...

  },

  // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.

  include: "**/*.svg?react",

  //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.

  exclude: "",

});

```

If you want to enable SVGO you can install `@svgr/plugin-svgo` and use following options to enable and configure it:

```js

svgr({

  svgrOptions: {

    plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],

    svgoConfig: {

      floatPrecision: 2,

    },

  },

  // ...

});

```

## License

MIT