Fixing TypeScript Errors with vite-plugin-svgr

If you are encountering TypeScript errors like 'type is not assignable to type IntrinsicAttributes' while using vite-plugin-svgr, you're not alone. This guide walks you through the proper configuration and type definitions needed to resolve these errors and ensure smooth integration of SVGs as React components.

Understanding the Problem

When using vite-plugin-svgr in a Vite project with TypeScript, the default TypeScript configuration may not recognize SVGs imported as React components. This can result in the following error:

Type '{ ... }' is not assignable to type 'IntrinsicAttributes'.

This issue occurs because TypeScript lacks the necessary type definitions for the SVG imports. Here's how to fix it.

Solutions

1. Update vite-plugin-svgr Configuration

Ensure your vite.config.ts file includes the correct plugin configuration. Here’s an example:

import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    svgr({
      exportAsDefault: true,
      svgrOptions: {
        icon: true,
      },
    }),
  ],
})

This configuration ensures that SVGs can be imported as React components.

2. Add Type Definitions

To resolve TypeScript errors, add the appropriate type definitions for SVG imports.

Option 1: Update tsconfig.json

Add the following to the compilerOptions in your tsconfig.json file:

"compilerOptions": {
  "types": ["vite-plugin-svgr/client"]
}

This tells TypeScript to include the type definitions provided by vite-plugin-svgr.

Option 2: Add Custom Type Declarations

If additional customization is required, create a svg.d.ts file in your project (e.g., in a types folder) and add the following:

declare module '*.svg' {
  import * as React from 'react'

  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>

  export default ReactComponent
}

3. Update vite-env.d.ts

Ensure that your vite-env.d.ts includes the following reference:

/// <reference types="vite-plugin-svgr/client" />

If you’ve added a custom type declaration (e.g., svg.d.ts), reference it before any other declarations:

/// <reference types="./types/svg" />
/// <reference types="vite/client" />

4. Import and Use SVGs

With the configurations in place, you can import and use SVGs as React components in your .tsx files:

import { ReactComponent as Icon } from './path/to/icon.svg';

const App = () => (
  <div>
    <Icon title="My Icon" />
  </div>
);

export default App;

This approach ensures that TypeScript recognizes the SVG import and applies the correct type definitions.

FAQs

1. Why do I get errors when importing SVGs in TypeScript?

TypeScript lacks built-in type definitions for SVG imports. Adding the necessary declarations or using vite-plugin-svgr resolves this issue.

2. Do I need to install additional dependencies?

No additional dependencies are required if you’re using vite-plugin-svgr. Ensure it’s properly configured in your vite.config.ts file.

3. Can I customize the way SVGs are imported?

Yes, you can customize the behavior by modifying the svgrOptions in the plugin configuration.