snowpack-plugin-svgr

Use svgr to transform your SVGs into React components with Snowpack

npm i -D snowpack-plugin-svgr

Quick start

// snowpack.config.json
{
  "plugins": [["snowpack-plugin-svgr", { /* see "Plugin Options" below */ }]]
}

Plugin Options

interface SnowpackPluginSvgrOptions {
  /**
   * Includes only the  specified paths
   */
  include?: string[]
  /**
   * Excludes the specified paths
   */
  exclude?: string[]
  /**
   * These options are passed directly to babel.transformAsync()
   */
  babelOptions?: TransformOptions
  /**
   * These options are passed directly to `@svgr/core`'s `convert()` function
   * See: https://react-svgr.com/docs/options/
   */
  svgrOptions?: any
}

Usage

import CatIcon from './assets/icons/cat.svg'

// Use like you would an `<svg>` component
<CatIcon />

Adding types to a TypeScript app

In types/static.d.ts

// Replace this
declare module '*.svg' {
  const ref: string
  export default ref
}

// With this
declare module '*.svg' {
  const ref: React.RefForwardingComponent<
    SVGSVGElement,
    React.SVGAttributes<SVGSVGElement>
  >
  export default ref
}

LICENSE

MIT