Gathering detailed insights and metrics for rollup-plugin-svg-sprite-loader
A rollup plugin to create and bundle inline/external svg sprite file.
Installations
npm install rollup-plugin-svg-sprite-loaderDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Score
70.1
Supply Chain
97.6
Quality
74.9
Maintenance
100
Vulnerability
100
License
Releases
3
Contributors
1
Unable to fetch Contributors
Languages
3
TypeScript
JavaScript
Shell
TypeScript (78.23%)
JavaScript (21.53%)
Shell (0.24%)
Developer
nyanyani
Download Statistics
Total Downloads
619
Last Day
1
Last Week
6
Last Month
20
Last Year
105
GitHub Statistics
3 Stars
17 Commits
1 Watching
3 Branches
1 Contributors
Bundle Size
924.04 kB
Minified
222.55 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.4
Package Id
rollup-plugin-svg-sprite-loader@0.0.4
Unpacked Size
143.55 kB
Size
32.10 kB
File Count
25
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
619
Last day
0%
1
Compared to previous day
Last week
-25%
6
Compared to previous week
Last month
185.7%
20
Compared to previous month
Last year
-49%
105
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
Dev Dependencies
32
@babel/core@babel/plugin-transform-runtime@babel/plugin-transform-typescript@babel/preset-env@babel/preset-typescript@commitlint/cli@commitlint/config-conventional@rollup/plugin-babel@rollup/plugin-commonjs@rollup/plugin-json@rollup/plugin-node-resolve@rollup/plugin-typescript@types/babel__plugin-transform-runtime@types/jest@types/node@types/react@types/svgo@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-jestcsstypeeslinteslint-config-prettiereslint-plugin-jesthuskyjestrimrafrollupts-jestts-nodetslibtypescript
Versions
rollup-plugin-svg-sprite-loader
A rollup plugin to create and bundle external svg sprite file.
Table of contents
Installation
1# via npm 2 npm install rollup-plugin-svg-sprite-loader -D 3 4# via yarn 5 yarn add rollup-plugin-svg-sprite-loader
Configuration
Module Config
symbolIdQuery (string | (filePath: string) => string, default [name])
Set <symbol>attribute id , and set <use> attribute id to [symbolId]-usage in extract mode by default.
Patterns: [extname], [dirname], [hash], [name]
e.g.:
1import svg from "rollup-plugin-svg-sprite-loader" 2 3rollup({ 4 //... 5 plugins: [ 6 svg({ 7 // custom function 8 symbolIdQuery(filePath) { 9 return `${baseName(filePath, extname(filePath))}-${hash()}` 10 }, 11 // pattern 12 symbolIdQuery: "[name][hash]", 13 }), 14 ], 15})
extract (boolean, default false)
true: Create external sprite file in outputPath/publicPath, and export SpriteSymbol<id: string, viewBox: string, url: string, toString(): string>
false: Inline sprite code and mount it when DOMContentLoaded , and export symbol instance SpriteSymbol<id: string, viewBox: string>
pureSprite (boolean, default: false)
true: Build sprite file in extract mode without <styles> and <use>.
false: Build sprite file in extract mode with <styles> and <use>.
outputPath (string, default: "./dist/")
Set bundle file path, should be equal to rollup config output.dir.
publicPath (string, default: "/public/")
Set output path for sprite file which is relative to outputPath.
spriteFilename (string | (spriteDist: string) => string, default: "sprite.svg")
Set output sprite filename in extract mode.
Patterns: [dirname], [hash]
e.g.:
1import svg from "rollup-plugin-svg-sprite-loader" 2 3rollup({ 4 //... 5 plugins: [ 6 svg({ 7 // custom function 8 spriteFilename(spriteDist) { 9 return `sprite${baseName(filePath).slice(0, 6)}` 10 }, 11 // pattern 12 spriteFilename: "sprite[hash].svg", 13 }), 14 ], 15})
Svgo Config
Options are passed directly to svgo to toggle various svgo plugins. You can find all plugins here: https://github.com/svg/svgo#what-it-can-do
pretty (boolean, default: false)
minify (boolean, default: true)
Option minify will override option pretty.
Usage
1// rollup.config.js 2import crypto from "crypto" 3import { baseName, extname } from "path" 4 5import svgSpriteLoader from "rollup-plugin-svg-sprite-loader" 6 7const hash = () => crypto.createHash('sha1').update(buffer).digest('hex').substr(0, 16) 8 9export default { 10 input: "src/index.js", 11 output: { 12 file: "dist/app.js", 13 format: "iife", 14 }, 15 plugins: [ 16 svgSprite({ 17 outputPath: "dist/", 18 publicPath: "./public/", 19 spriteFilename: "sprite[hash]", 20 symbolIdQuery(filePath) {return `${baseName(filePath, extname(filePath))}-${hash()}`}, 21 extract: true, 22 }), 23 ], 24} 25 26// somewhere in your project 27// extract mode 28import IconSVG from "./assets/icon/icon.svg" 29 30const Icon = () => { 31 const { viewBox, url } = IconSVG 32 return ( 33 <svg viewBox={viewBox}> 34 <use xlinkHref={url} /> 35 </svg> 36 ) 37} 38 39// inline mode 40import IconSVG from "./assets/icon/icon.svg" 41 42const Icon = () => { 43 const { id, viewBox } = IconSVG 44 return ( 45 <svg viewBox={viewBox}> 46 <use xlinkHref={`#${id}`> 47 </svg> 48 ) 49}
Licence
MIT
No vulnerabilities found.
No security vulnerabilities found.