Nostalgic Piano Music

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

    1.1.0 • Public • Published


    npm version npm downloads license Twitter: CoreyPsoinos

    nuxt-svgo is a Nuxt module to load optimized SVG files as Vue components.

    Try it on StackBlitz!


    Using npm

    npm install nuxt-svgo --save-dev

    Using yarn

    yarn add nuxt-svgo -D

    Using pnpm

    pnpm add nuxt-svgo -D


    Use the default configuration by adding 'nuxt-svgo' to the modules section of your Nuxt config.

    // nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt'
    export default defineNuxtConfig({
      modules: ['nuxt-svgo']

    Then, in any .vue file, import your asset and use it as a component:

    <script setup lang="ts">
    import IconHome from '~/assets/icon-home.svg'
        <IconHome class="w-5 h-5" />

    How it works


    If your Nuxt app uses Vite, this module adds vite-svg-loader to the underlying Vite configuration. All due credit for vite-svg-loader to its author, @jpkleemans.


    If your Nuxt app uses Webpack, this module adds vue-svg-loader and svgo-loader to the underlying Webpack configuration. As discussed in this issue, vue-svg-loader uses version 1 of SVGO. vue-svg-loader looks to be unmaintained, with the latest beta release more than 2 years old. We disable the SVGO functionality of vue-svg-loader, instead relying on svgo-loader to perform optimizations, essentially making vue-svg-loader wrap the svg content in <template></template> tags.

    All due credit for vue-svg-loader to its author, @damianstasik. All due credit for svgo-loader to its author, @svg.


    Use your own custom SVGO options:

    // nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt'
    export default defineNuxtConfig({
      modules: ['nuxt-svgo'],
      svgo: {
        svgoConfig: {
          multipass: true,
          plugins: [
              name: 'preset-default',
              params: {
                overrides: {
                  // customize default plugin options
                  inlineStyles: {
                    onlyMatchedOnce: false
                  // or disable plugins
                  removeDoctype: false,
                  removeViewBox: false

    Disable SVGO entirely:

    // nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt'
    export default defineNuxtConfig({
      modules: ['nuxt-svgo'],
      svgo: {
        svgo: false

    Usage with TypeScript

    When importing a SVG component in TypeScript, you will get a "Cannot find module" error. In order to fix thix, you need to provide a type declaration to tell TypeScript how to handle SVG components. Here's an example, using a custom.d.ts file at the application's root:

    // custom.d.ts
    declare module '*.svg' {
      import type { DefineComponent } from 'vue'
      const component: DefineComponent
      export default component


    • Run pnpm dev:prepare to generate type stubs.
    • Use pnpm dev to start playground in development mode.


    Corey Psoinos

    Show your support

    Give a ⭐️ if this project helped you!

    📝 License

    Copyright © 2022 Corey Psoinos.

    This project is MIT licensed.


    npm i nuxt-svgo

    DownloadsWeekly Downloads






    Unpacked Size

    10.1 kB

    Total Files


    Last publish


    • cpsoinos