https://github.com/arnaudbarre/vite-plugin-fast-react-svg

Turn SVG into React components, without Babel
https://github.com/arnaudbarre/vite-plugin-fast-react-svg

react svg vite

Last synced: 18 days ago
JSON representation

Turn SVG into React components, without Babel

• Host: GitHub
• URL: https://github.com/arnaudbarre/vite-plugin-fast-react-svg
• Owner: ArnaudBarre
• License: mit
• Created: 2022-02-02T13:29:49.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-31T11:43:46.000Z (over 1 year ago)
• Last Synced: 2024-05-02T00:44:28.601Z (7 months ago)
• Topics: react, svg, vite
• Language: TypeScript
• Homepage:
• Size: 38.1 KB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

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

Turn SVG into React components, without Babel.

⚠️ This plugin expects svg to be cleanup by [svgo](https://github.com/svg/svgo) with `convertStyleToAttrs` enable. You can also use the [web version](https://jakearchibald.github.io/svgomg/) and toggle `Style to attributes`.

## Why

While [svgr](https://github.com/gregberge/svgr) is great, it uses AST transformation from Babel, which is too slow (~300ms per SVG). This plugin uses regex manipulations and `dangerouslySetInnerHTML`, which is almost instantaneous. It's working well for SVG optimized by [svgo](https://github.com/svg/svgo).

## Installation

```sh

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

```

In your vite config:

```ts

import { defineConfig } from "vite";

import { svgPlugin } from "vite-plugin-fast-react-svg";

export default defineConfig({

  plugins: [svgPlugin()],

});

```

In `tsconfig.json`:

```json5

{

  compilerOptions: {

    types: ["vite-plugin-fast-react-svg/types", "vite/client"],

  },

}

```

If you use a custom `.d.ts` file instead of `tsconfig.json` to include Vite Client Types, you will need to modify it accordingly:

```

/// 

/// 

```

> N.B: You only need to include Vite Client Types via `tsconfig.json` _or_ a custom `d.ts` file. Both are not needed, so if you have included the types in `tsconfig.json` you can safely delete your `.d.ts` file.

## Usage

```jsx

import Logo from "./logo.svg";

const Example = () => (

  <>

    

  >

);

```