@open-xchange/vite-plugin-react-extended

A Vite plugin that bundles @vitejs/plugin-react and vite-plugin-svgr (SVG files as React components).

Internally, this plugin will install and set up the package @svgr/plugin-svgo for optimizing SVG files when bundling your application.

Installation

npm install -D @open-xchange/vite-plugin-react-extended
# or
pnpm add -D @open-xchange/vite-plugin-react-extended
# or
yarn add -D @open-xchange/vite-plugin-react-extended

Configuration

Add the plugin to your Vite configuration:

// vite.config.ts

import { defineConfig } from 'vite' // or 'vitest/config'
import reactPlugin from '@open-xchange/vite-plugin-react-extended'

export default defineConfig(() => {

  plugins: [

    // default settings
    reactPlugin(),

    // or with configuration
    reactPlugin({
      react: { /*...*/ }, // options for @vitejs/plugin-react
      svgr: { /*...*/ }, // options for vite-plugin-svgr
    }),
  ],
})

Register TypeScript type definitions for SVG file imports:

// src/tsconfig.json

{
  "types": [
    "vite/client",
    "@open-xchange/vite-plugin-react-extended/client"
  ],
}

Usage

Import your SVG files as components (do not forget to add the ?react query):

// src/components/LoginForm.tsx

import LoginPicture from "../assets/LoginPicture.svg?react"

export default function LoginForm(): React.ReactNode {
  return (
    <form>
      <LoginPicture class="login-picture" />
      {/* ... */}
    </form>
  )
}