@jariberg/vite-plugin-svg-plus

Vite plugin to optimize and transform imported SVGs as component, sprite, datauri or injected html.

Unopinionated about frameworks compatible with react, solid-js, vue. Production builds have zero runtime overhead and optimizations and transformations are applied during build.

!!! WORK IN PROGRESS !!!

Configuration

// vite.config.ts
import svgtools from '@jariberg/vite-plugin-svg-plus'

export default {
  plugins: [svgtools()],
}

Example

Import SVG per defaults. ReactComponent is the default configuration.

import Boat from './boat.svg'
export default () => (
  <>
    Purple Boat <Boat style="color:purple" />
  </>
)

Import as ReactComponent:

import { ReactComponent as Boat } from './boat.svg'

Typescript

If you are using TypeScript, there is also a declaration helper for better type inference:

{
  "compilerOptions": {
    "types": [
      "@jariberg/vite-plugin-svg-plus/client"
    ]
  }
}

/// <reference types="@jariberg/vite-plugin-svg-plus/client" />

Options

svgtools({
  /*
   * Supported export types:
   *
   * ReactComponent
   * ReactComponentAsSprite
   *
   * Overrides default behavior of Vite.
   */
  defaultExport: 'ReactComponent',
})

Development

Better versioning using https://github.com/sindresorhus/np

$ git -A
$ git checkin -m "commit message"
$ git push
$ np

Contributions are welcome. Make a PR.

License

MIT