SVG Sprite Module


> 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.

Demo: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

:warning: NOTE: SVG Sprites does not work on IE, if you wish to support IE you could use svg4everybody. Take a look at this issue to see how.

:rainbow: NOTE: If you wish to load single SVG icon and you don't want to create sprites, use Nuxt SVG Module. SVG module for Nuxt.js, allows you to import .svg files in multiple ways depending on the resource query you provide.

Installation

``bash
yarn add @nuxtjs/svg-sprite


or


npm i @nuxtjs/svg-sprite
`

Usage

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

`js
{
buildModules: [
'@nuxtjs/svg-sprite',
],
svgSprite: {
// manipulate module options
}
}
`

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

`vue

`

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):

`vue

`

Module create a page that list all of icons for you, by default you can see this page in /_icons path.
Note: This page creates in dev mode, So you can't see it in production.

Options

Module default options:


| Option | Default | Description |
| ------ | ------- | ----------- |
| input | ~/assets/sprite/svg | Directory of original svg files |
| output | ~/assets/sprite/gen | Directory to store generated sprites |
| defaultSprite | icons | Name of default sprite (default sprite consist of all svgs that place directly inside input directory) |
| elementClass | icon | global class of all instances |
| spriteClassPrefix | sprite- | Prefix of sprite specific classes |
| publicPath | null | Specifies a custom public path for the sprites |
| iconsPath | _icons | Custom path for icons list page (In order to disable this page, pass false or null to this option) |
| svgoConfig | null | Custom config object for SVGO, How to customize SVGO config |

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

`js
export default {
buildModules: ['@nuxtjs/svg-sprite'],
svgSprite: {
input: '~/assets/svg/'
}
}
`

Props

| 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