Neatly Packaged Modules

    vite-svg-loader
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    Vite SVG loader

    Vite plugin to load SVG files as Vue components, using SVGO for optimization.

    Version Downloads Tests 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 defineConfig({
      plugins: [vue(), svgLoader()]
    })

    Import params

    URL

    SVGs can be imported as URLs using the ?url suffix:

    import iconUrl from './my-icon.svg?url'
    // '/assets/my-icon.2d8efhg.svg'

    Raw

    SVGs can be imported as strings using the ?raw suffix:

    import iconRaw from './my-icon.svg?raw'
    // '<?xml version="1.0"?>...'

    Component

    SVGs can be explicitly imported as Vue components using the ?component suffix:

    import IconComponent from './my-icon.svg?component'
    // <IconComponent />

    Default import config

    When no explicit params are provided SVGs will be imported as Vue components by default. This can be changed using the defaultImport config setting, such that SVGs without params will be imported as URLs (or raw strings) instead.

    vite.config.js

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

    SVGO Configuration

    vite.config.js

    svgLoader({
      svgoConfig: {
        multipass: true
      }
    })

    Disable SVGO

    vite.config.js

    svgLoader({
      svgo: false
    })

    Skip SVGO for a single file

    SVGO can be explicitly disabled for one file by adding the ?skipsvgo suffix:

    import IconWithoutOptimizer from './my-icon.svg?skipsvgo'
    // <IconWithoutOptimizer />

    Use with TypeScript

    If you use the loader in a Typescript project, you'll need to import your svg files with the ?component param: import MyIcon from './my-icon.svg?component'.

    You'll also need to reference the type definitions:

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

    Sponsors

    Nexxtmove Logo

    Thanks to Nexxtmove for sponsoring the development of this project.
    Your logo or name here? Sponsor this project.

    Keywords

    Install

    npm i vite-svg-loader

    DownloadsWeekly Downloads

    48,131

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    183 kB

    Total Files

    42

    Last publish

    Collaborators

    • jpkleemans