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

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.

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/

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

🌈 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

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

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 <svg-icon> 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:

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>

Integrations

Storybook

If you are fan of storybook this might be interesting for you, This module provides a story to list and search available icons of your project. You can see stories under stories directory. If you are using @nuxtjs/storybook you can see the SvgSprites stories under Modules section in your storybook. By default Svg Sprites story will shows in your storybook, you disable/hide the story using Storybook's modules option

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/

Download Details:

Author: nuxt-community

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

Source Code: https://github.com/nuxt-community/svg-sprite-module

vue vuejs nuxtjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7