Package Exports

@nuxtjs/svg-sprite

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nuxtjs/svg-sprite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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/

Installation

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

Usage

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

{
  modules: [
    '@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:

<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" />

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 `<svg-icon>` instances
spriteClassPrefix	`sprite-`	Prefix of sprite specific classes

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

export default {
  modules: ['@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 `<title>` tag inside `<svg>`
desc	Accessibility description for icon, this props will transform to `<desc>` tag inside `<svg>`

Development

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: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/

@nuxtjs/svg-sprite