Nostalgic Piano Music

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

    1.1.0 • Public • Published

    nuxt-svgo

    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!

    Install

    Using npm

    npm install nuxt-svgo --save-dev

    Using yarn

    yarn add nuxt-svgo -D

    Using pnpm

    pnpm add nuxt-svgo -D

    Usage

    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'
    </script>
    
    <template>
      <div>
        <IconHome class="w-5 h-5" />
      </div>
    </template>

    How it works

    Vite

    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.

    Webpack

    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.

    Configuration

    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
    }

    Development

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

    Author

    Corey Psoinos

    Show your support

    Give a ⭐️ if this project helped you!

    📝 License

    Copyright © 2022 Corey Psoinos.

    This project is MIT licensed.

    Install

    npm i nuxt-svgo

    DownloadsWeekly Downloads

    737

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    10.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • cpsoinos