Gathering detailed insights and metrics for @nuxtjs/svg-sprite
Optimize SVG files and combine them into sprite
Installations
npm install @nuxtjs/svg-spriteDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
16.17.0
NPM Version
8.15.0
Score
63.5
Supply Chain
91.9
Quality
81.7
Maintenance
100
Vulnerability
99.3
License
Releases
15
Contributors
19
Unable to fetch Contributors
Languages
3
TypeScript
Vue
JavaScript
TypeScript (70.09%)
Vue (21.94%)
JavaScript (7.97%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
2,394,689
Last Day
188
Last Week
7,786
Last Month
32,982
Last Year
470,049
GitHub Statistics
MIT License
309 Stars
372 Commits
42 Forks
10 Watchers
19 Branches
19 Contributors
Updated on Feb 11, 2025
Maintainers
7
Package Meta Information
Latest Version
1.0.2
Package Id
@nuxtjs/svg-sprite@1.0.2
Unpacked Size
27.37 kB
Size
9.39 kB
File Count
19
NPM Version
8.15.0
Node Version
16.17.0
Published on
Mar 31, 2023
Total Downloads
Cumulative downloads
Total Downloads
2,394,689
Last Day
-33.1%
188
Compared to previous day
Last Week
-8.9%
7,786
Compared to previous week
Last Month
35.9%
32,982
Compared to previous month
Last Year
-18.2%
470,049
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
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
1yarn add @nuxtjs/svg-sprite 2# or 3npm i @nuxtjs/svg-sprite
Usage
Add @nuxtjs/svg-sprite to buildModules section of nuxt.config.js:
1{ 2 buildModules: [ 3 '@nuxtjs/svg-sprite', 4 ], 5 svgSprite: { 6 // manipulate module options 7 } 8}
Place your svg files in ~/assets/sprite/svg/, say sample.svg and use your image with globally registered svg-icon component:
1<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):
1<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:
1export default { 2 buildModules: ['@nuxtjs/svg-sprite'], 3 svgSprite: { 4 input: '~/assets/svg/' 5 } 6}
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
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. Sprites will show in your Storybook, unless you disable/hide the story using Storybook's modules option
Development
- Clone this repository
- Install dependencies using
yarn installornpm 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/
License
MIT License Copyright (c) Nuxt Community - Ahad Birang
No vulnerabilities found.
No security vulnerabilities found.