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',
 ]
}

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:

{
  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/'
  }
}

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