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/
yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite
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" />
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
ornpm 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/
MIT License
Copyright (c) Nuxt Community - Ahad Birang