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

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

Last synced: about 2 months 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-17T19:18:21.000Z (4 months ago)
• Last Synced: 2024-04-16T12:16:23.646Z (about 2 months ago)
• Language: TypeScript
• Size: 159 KB
• Stars: 470
• Watchers: 2
• Forks: 53
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• 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)
• awesome-stars - pd4d10/vite-plugin-svgr - Vite plugin to transform SVGs into React components (TypeScript)
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-viter - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-stars - vite-plugin-svgr
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)
• awesome-vite - vite-plugin-svgr - Transform SVGs into React components. (Plugins / React)

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:

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