vite-svg-loader

Because TypeScript does not natively understand .vue file imports, you must use specific tools to ensure type safety:

• Type Checking: Use vue-tsc instead of the standard tsc CLI for type checking in your build or check scripts.
• Editor Support: Install the TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types within your editor.

Add svgLoader to your vite.config.js plugins array. It is typically used alongside the Vue plugin.

import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

To ensure TypeScript recognizes the various import types (URL, Raw, Component), add a reference to the vite-svg-loader types in your vite-env.d.ts file.

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

To get the best development experience with Vue 3, TypeScript, and Vite, use VS Code with the following extensions:

• Volar: The official Vue language service.
• TypeScript Vue Plugin (Volar): Enables the TypeScript language service to understand .vue files.

Important: Ensure that the Vetur extension is disabled to avoid conflicts with Volar.

Install the plugin as a development dependency using npm.

npm install vite-svg-loader --save-dev

If the standalone TypeScript plugin is slow, you can enable Volar's Take Over Mode. This allows Volar to handle both .ts and .vue files directly, improving performance.

Follow these steps in VS Code:

1. Disable the built-in TypeScript Extension:
   • Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
   • Run Extensions: Show Built-in Extensions.
   • Find TypeScript and JavaScript Language Features.
   • Right-click it and select Disable (Workspace).
2. Reload VS Code:
   • Open the Command Palette.
   • Run Developer: Reload Window.

You can change the default behavior for SVGs that do not use a query suffix by setting the defaultImport option in the svgLoader configuration. Valid values are 'url' or 'raw'. Note that the default is to import as components.

svgLoader({
  defaultImport: 'url' // or 'raw'
})

The loader uses SVGO for optimization. You can customize the SVGO settings via svgoConfig or disable optimization entirely by setting svgo: false in the svgLoader configuration.

To skip optimization for a specific file without changing global settings, append the ?skipsvgo suffix to the import path.

// Custom SVGO config
svgLoader({
  svgoConfig: {
    multipass: true
  }
})

// Disable SVGO globally
svgLoader({
  svgo: false
})

// Skip SVGO for a single file
import IconWithoutOptimizer from './my-icon.svg?skipsvgo'

You can control how an SVG is imported by appending a query suffix to the import path:

• ?url: Imports the SVG as a URL string (e.g., a data URI).
• ?raw: Imports the SVG as a raw string (the XML content).
• ?component: Explicitly imports the SVG as a Vue component.

By default, if no suffix is provided, SVGs are imported as Vue components.

// Import as URL
import iconUrl from './my-icon.svg?url'

// Import as Raw string
import iconRaw from './my-icon.svg?raw'

// Import as Vue Component
import IconComponent from './my-icon.svg?component'

The svgLoader function is the main entrypoint for the Vite plugin. It accepts an optional options object to configure how SVGs are processed. By default, it uses the defaultImport setting if no query parameter is provided in the import statement.

Available configuration options:

• svgoConfig: An object passed to svgo for SVG optimization.
• svgo: A boolean to enable or disable SVGO optimization. If set to false, optimization is skipped.
• defaultImport: A string specifying the default import type ('url', 'raw', or 'component') when no query parameter is present.

const svgLoader = require('vite-svg-loader');

// Example configuration
export default {
  plugins: [
    svgLoader({
      svgoConfig: { plugins: ['preset-default'] },
      svgo: true,
      defaultImport: 'component'
    })
  ]
};

You can control how an SVG is imported by appending a query parameter to the import path. This overrides the defaultImport setting provided in the plugin configuration.

Supported query parameters:

• ?url: Imports the SVG as a URL string (uses the default Vite SVG loader).
• ?raw: Imports the SVG source code as a raw string.
• ?component: Imports the SVG as a Vue component (optimized via SVGO if enabled).
• ?skipsvgo: Imports the SVG as a Vue component but skips the SVGO optimization step.

import svgUrl from './icon.svg?url';
import svgRaw from './icon.svg?raw';
import IconComponent from './icon.svg?component';
import IconNoOptimize from './icon.svg?skipsvgo';