Skip to content
Optimize SVG files and combine them into sprite
Branch: master
Clone or download
farnabaz chore(deps): update all non-major dependencies (#25)
chore(deps): update all non-major dependencies
Latest commit f6e8a26 Apr 30, 2019

SVG Sprite Module

npm (scoped with tag) npm

Optimized and Easy way to use SVG files in Nuxt.js

Sprites help increase speed, maintain a consistent development workflow, and make the creation of icons much faster. SVG sprites are typically created using icons of a similar shape or form whereas larger scale graphics are one-off applications.



yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite


Add @nuxtjs/svg-sprite to modules section of nuxt.config.js:

  modules: [

Place your svg files in ~/assets/sprite/svg/, say sample.svg and use your image with globally registered svg-icon component:

<svg-icon name="sample" />

To create different sprites, create custom directory inside ~/assets/sprite/svg/ and put your svg files inside it and place directory tile before icon name (example: ~/assets/sprite/svg/my-sprite/my-image.svg):

<svg-icon name="my-sprite/my-image" />


Module default options:

  input: '~/assets/sprite/svg',
  output: '~/assets/sprite/gen',
  defaultSprite: 'icons'

You can update them with the svgSprite option in nuxt.config.js:

export default {
  modules: ['@nuxtjs/svg-sprite'],
  svgSprite: {
    input: '~/assets/svg/'


Prop Description
name icon path with format SPRITE_NAME/ICON_NAME, SPRITE_NAME can be omitted for default sprite
title Accessibility title for icon, this props will transform to <title> tag inside <svg>
desc Accessibility description for icon, this props will transform to <desc> tag inside <svg>


  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using npm run dev

You can also contribute directly with CodeSandBox:


MIT License
Copyright (c) Nuxt Community - Ahad Birang

You can’t perform that action at this time.