Gathering detailed insights and metrics for vite-plugin-svg-sprite-component
Installations
npm install vite-plugin-svg-sprite-componentDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.17.0
NPM Version
6.14.13
Score
68
Supply Chain
96.8
Quality
75.2
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
2
Unable to fetch Contributors
Languages
4
TypeScript
Vue
JavaScript
HTML
TypeScript (60.97%)
Vue (27.63%)
JavaScript (7.45%)
HTML (3.95%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
cereschen
Download Statistics
Total Downloads
37,306
Last Day
12
Last Week
74
Last Month
476
Last Year
9,119
GitHub Statistics
7 Stars
12 Commits
3 Forks
2 Watchers
1 Branches
2 Contributors
Updated on Jun 09, 2024
Bundle Size
118.23 kB
Minified
33.68 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.10
Package Id
vite-plugin-svg-sprite-component@1.0.10
Unpacked Size
12.18 kB
Size
3.91 kB
File Count
4
NPM Version
6.14.13
Node Version
14.17.0
Total Downloads
Cumulative downloads
Total Downloads
37,306
Last Day
-33.3%
12
Compared to previous day
Last Week
-42.2%
74
Compared to previous week
Last Month
13.9%
476
Compared to previous month
Last Year
21.8%
9,119
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
2
vite-plugin-svg-sprite-component
Vite plugin for creating SVG sprites and components
install
npm i vite-plugin-svg-sprite-component -D
yarn add vite-plugin-svg-sprite-component -D
usage
1// vite.config.js 2import svgSpritePlugin from "vite-plugin-svg-sprite-component" 3 4module.exports = { 5 plugins: [svgSpritePlugin({ symbolId: (name)=> "icon-" + name })], 6}
1// main.js
2// globby import
3const svgs = import.meta.globEager('/**your svg path*/*.svg')
4// normal
5import example from '/**your svg path*/example.svg'
6// You should call it at least once so it will not be tree shaked
7svgs
8exampleAny where you want
1<template> 2 <svg> 3 <use xlink:href="#icon-example" /> 4 </svg> 5</template> 6
Used as a component
1<template> 2 <IconExample /> 3</template> 4<script> 5import { IconExample } from '/@/icons/svg/example.svg' 6export default { 7 components:{ IconExample } 8} 9</script>
When option defaultExport be true
1<template> 2 <Icon /> 3</template> 4<script> 5import Icon from '/@/icons/svg/example.svg' 6export default { 7 components:{ Icon } 8} 9</script>
Configuration
1export type Options = { 2 /** 3 * How <symbol> id attribute should be named 4 * Default behavior: /@/icons/example.svg => example 5 */ 6 symbolId?: (name: string, path: string) => string, 7 /** 8 * Remove attributes also include members in style sttr 9 * @default ['width','height'] 10 */ 11 removeAttrs?: string[], 12 13 component?: { 14 /** The export component type, Only Vue now */ 15 type: 'vue', 16 /** export const [exportName] as VNode 17 * Default behavior: icon-example => IconExample 18 */ 19 exportName?: (name: string, path: string) => string, 20 21 /** 22 * export default [exportName] as VNode 23 * @default false 24 */ 25 defaultExport?: boolean, 26 } 27} 28
License
MIT
No vulnerabilities found.
No security vulnerabilities found.