/vite-svg-loader

Vite 2.x plugin to load SVG files as Vue components

Primary LanguageJavaScriptMIT LicenseMIT

Vite SVG loader

Vite 2.x plugin to load SVG files as Vue components.

Version Downloads License

<template>
  <MyIcon />
</template>

<script setup>
import MyIcon from './my-icon.svg'
</script>

Install

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

Setup

vite.config.js

import svgLoader from 'vite-svg-loader'

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

Use with TypeScript

If you use the loader in a Typescript project, you might get warnings like Type 'string' is not assignable to type 'Component'. To fix this you'll need to add the following type definitions to your compiler options:

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-svg-loader", "vite/client"]
  }
}