nuxt-svgo

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

Try it on StackBlitz!

Install

Using npm

1npm install nuxt-svgo --save-dev

Using yarn

1yarn add nuxt-svgo -D

Using pnpm

1pnpm add nuxt-svgo -D

Usage

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

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6})

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

1<template>
2  <div>
3    <!-- font size controls width & height by default: -->
4    <IconHome class="text-xl" />
5    <!-- you can disable it: -->
6    <IconHome class="w-5 h-5" :fontControlled="false" />
7  </div>
8</template>
9
10<script setup lang="ts">
11  import IconHome from '~/assets/icon-home.svg'
12</script>

Or, if you use vite, in any .vue file, simply use your icon's name with svgo prefix as component name:

1<template>
2  <div>
3    <SvgoHome class="text-xl" />
4    <!-- Or -->
5    <svgo-home class="text-xl" />
6  </div>
7</template>

It automatically imports your icons from assets/icons/ folder by default. you can configure this by passing autoImportPath in your config:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    autoImportPath: './assets/other-icons/',
8  },
9})

If you want to use auto import but you don't want to use the nuxt-icon component (used by default), You can do so by using defaultImport: 'component':

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    defaultImport: 'component',
8  },
9})

You can also use your own custom component instead of the built-in nuxt-icon component using the customComponent option. This custom component must have icon property, just like the nuxt-icon component provided by nuxt-svgo.

Example:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    customComponent: 'YourComponent',
8  },
9})

By default module registers all icons inside autoImportPath globally. This may be unwanted behavior as it generates chunks for each icon to be used globally, which will result in huge amount of files if you have many icons. If you want to disable global registration simply use global: false in module options:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    global: false,
8  },
9})

to disable auto importing, simply set autoImportPath to false:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    autoImportPath: false,
8  },
9})

Subfolders

The icons's component name will follow Nuxt's component prefix convention. Therefore, if prefix is turned on for your components, the component name for assets/icons/admin/badge.svg, for example, will be svgo-admin-badge:

1<svgo-admin-badge />

componentPrefix

You can change the default prefix (svgo) to your custom prefix using componentPrefix option:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    componentPrefix: 'i',
8  },
9})

1// in your template
2<template>
3  <div>
4    <i-home />
5  </div>
6</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.

We use a modified copy of this vite plugin for auto loading icons with extra control using a nuxt-icon component.

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.

Make sure peer dependencies of this module (vue-svg-loader,svgo-loader, vue-loader) are installed if you are using webpack.

Configuration

Use your own custom SVGO options:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    svgoConfig: {
8      multipass: true,
9      plugins: [
10        {
11          name: 'preset-default',
12          params: {
13            overrides: {
14              // customize default plugin options
15              inlineStyles: {
16                onlyMatchedOnce: false,
17              },
18
19              // or disable plugins
20              removeDoctype: false,
21              removeViewBox: false,
22            },
23          },
24        },
25      ],
26    },
27  },
28})

Disable SVGO entirely:

1// nuxt.config.ts
2import { defineNuxtConfig } from 'nuxt'
3
4export default defineNuxtConfig({
5  modules: ['nuxt-svgo'],
6  svgo: {
7    svgo: false,
8  },
9})

Import queries (Vite.js only)

Here are the possible queries when importing a SVG file:

• url_encode: loads optimized svg as data uri (uses svgo + mini-svg-data-uri)
• raw: loads contents as text
• raw_optimized: loads optimized svg as text
• skipsvgo: loads contents as a component (unoptimized, without nuxt-icon)
• component: loads optimized svg as a component
• componentext: loads optimized svg with nuxt-icon component

for example:

1<template>
2  <div>
3    <IconHome />
4  </div>
5</template>
6
7<script setup lang="ts">
8  import IconHome from '~/assets/icon-home.svg?componentext' // the default
9</script>

Important note for url_encode query

xmlns="http://www.w3.org/2000/svg" attribute is required for uri data to work. in some rare cases, it may not be there. make sure it exists when using url_encode query or the image will not be shown.

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:

1// custom.d.ts
2declare module '*.svg' {
3  import type { DefineComponent } from 'vue'
4  const component: DefineComponent
5  export default component
6}

nuxt-icon component

Originally copied over from the nuxt-icons module, but later heavily modified to support tree shaking and SSR. This is not intended to be used directly. However, you can import your icons directly and pass them to the component using the icon prop.

Component props

• filled: use icon's original colors when true
• fontControlled: you can disable the default behavior of scaling by font size by setting this prop to false
• icon: the component that nuxt-icon will render as. this is used internally to provide control over the icon.

Migrating from v1.x to v2.x

If you were using the nuxt-icon component before, you have to change your code like this:

1<!-- from: -->
2<nuxt-icon name="home" filled />
3<nuxt-icon name="special/home" filled />
4<!-- to: -->
5<svgo-home filled />
6<svgo-special-home filled />

Migrating from v2.x to v3.x

v3 now uses an opinionated default config for svgo by default, to make it work like before simply pass {} to svgoConfig option:

1export default defineNuxtConfig({
2  // ...
3  svgo: {
4    svgoConfig: {},
5  },
6})

also since v3 simpleAutoImport option is removed and defaultImport is changed to componentext. if you were using the following code, and relying on the defaultImport, change it:

1<template>
2  <div>
3    <IconHome class="text-xl" />
4  </div>
5</template>
6
7<script setup lang="ts">
8  // change this:
9  import IconHome from '~/assets/icon-home.svg'
10  // to this:
11  import IconHome from '~/assets/icon-home.svg?component'
12</script>

Development

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

Authors

Corey Psoinos

• Twitter: @CoreyPsoinos
• Github: @cpsoinos

Javad Mnjd

• Github: @jd1378

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2023 Corey Psoinos.

This project is MIT licensed.