Gathering detailed insights and metrics for @0x-jerry/unplugin-svg-component
generate a vue/react component through svg files, supporting svg file HMR, Tree-shaking, SSR and TS hint.
Installations
npm install @0x-jerry/unplugin-svg-componentDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.12.1
NPM Version
9.5.1
Score
52.2
Supply Chain
84.2
Quality
66.9
Maintenance
50
Vulnerability
99.6
License
Releases
35
Contributors
3
Unable to fetch Contributors
Languages
4
TypeScript
HTML
Vue
JavaScript
TypeScript (97.81%)
HTML (0.84%)
Vue (0.79%)
JavaScript (0.56%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
jevon617
Download Statistics
Total Downloads
305
Last Day
1
Last Week
1
Last Month
14
Last Year
91
GitHub Statistics
MIT License
64 Stars
160 Commits
7 Forks
1 Watchers
1 Branches
3 Contributors
Updated on Jan 09, 2025
Maintainers
1
Package Meta Information
Latest Version
0.5.1
Package Id
@0x-jerry/unplugin-svg-component@0.5.1
Unpacked Size
117.37 kB
Size
12.52 kB
File Count
21
NPM Version
9.5.1
Node Version
18.12.1
Published on
Mar 17, 2023
Total Downloads
Cumulative downloads
Total Downloads
305
Last Day
0%
1
Compared to previous day
Last Week
-90%
1
Compared to previous week
Last Month
40%
14
Compared to previous month
Last Year
-57.5%
91
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
unplugin-svg-component
English | 中文
unplugin-svg-component inspired by vite-plugin-svg-icons, it will generate a Vue/React component through SVG files, use the SVG icon through the component.
IDE Intelligent
Vue
React
Features
- intelligent: When using components, the name of the SVG file will be prompted with Typescript
- HMR: HMR for svg file
- Vue & React: Support Vue&React and automatically detect project types.
- Tree-shaking: Only bundle the icons you really use since v0.5.0.
Installation
1yarn add unplugin-svg-component -D 2# or 3npm i unplugin-svg-component -D 4# or 5pnpm install unplugin-svg-component -D
Usage
Vite config
1// vite.config.ts 2import { defineConfig } from 'vite' 3import UnpluginSvgComponent from 'unplugin-svg-component/vite' 4export default defineConfig({ 5 plugins: [ 6 UnpluginSvgComponent({ /* options */ }), 7 ], 8})
Vue-cli config
1// vue.config.js 2const { defineConfig } = require('@vue/cli-service') 3const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default 4 5module.exports = defineConfig({ 6 configureWebpack: { 7 plugins: [ 8 UnpluginSvgComponent({ /* options */ }) 9 ] 10 } 11})
Webpack config
1// webpack.config.js 2const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default 3 4module.exports = { 5 /* ... */ 6 plugins: [ 7 UnpluginSvgComponent({ /* options */ }), 8 ], 9}
Rollup config
1// rollup.config.js 2import UnpluginSvgComponent from 'unplugin-svg-component/rollup' 3 4export default { 5 plugins: [ 6 UnpluginSvgComponent({ /* options */ }), 7 ], 8}
Esbuild config
1// esbuild.config.js 2import { build } from 'esbuild' 3import UnpluginSvgComponent from 'unplugin-svg-component/esbuild' 4 5build({ 6 /* ... */ 7 plugins: [ 8 UnpluginSvgComponent({ 9 /* options */ 10 }), 11 ], 12})
Vue
1// main.ts 2import SvgIcon from '~virtual/svg-component' 3app.component(SvgIcon.name, SvgIcon)
React
1// App.tsx 2import SvgIcon from '~virtual/svg-component' 3 4function App() { 5 return ( 6 <div className="logo"> 7 <SvgIcon name='icon-react'></SvgIcon> 8 </div> 9 ) 10}
Plugin Configuration
| Parameter | Type | Default | Description |
|---|---|---|---|
| iconDir | string | - | the icon folder of the Sprite image |
| projectType | vue | react | auto | auto | the project type, detect automatically |
| dts | boolean | - | whether generate d.ts file |
| dtsDir | string | - | d.ts location |
| prefix | string | - | symbolId prefix |
| componentName | string | SvgIcon | the name of component |
| componentStyle | string | width: 1em; height: 1em; fill:currentColor; | the style of component |
| preserveColor | RegExp | - | usually, the plugin will set SVG's fill and stroke with 'currentColor', this option will perform regular matching on each SVG path, the successfully matched SVG will not do the replacement, but retain the original color. |
| symbolIdFormatter | (svgName:string, prefix: string)=>string | look this way | the symbolId's formatter |
| optimizeOptions | SvgoOptions | - | svgo optimize Options |
| svgSpriteDomId | string | svg_sprite__dom | Customize the ID of the svgDom |
| vueVersion | 2 | 3 | auto | auto | Vue version |
| scanGlob | string[] | look this way | the glob pattern used in tree-shaking |
Typescript support
1// tsconfig.json 2{ 3 "include": ["svg-component.d.ts", "svg-component-global.d.ts"] 4}
Best Practices
You can refer to examples as required. Note that the configuration in examples is the default configuration.
Contributing
- Fork it (https://github.com/Jevon617/unplugin-svg-component/fork)
- Create your feature branch (
git checkout -b feature/fooBar) - Commit your changes (
git commit -am 'Add some fooBar') - Push to the branch (
git push origin feature/fooBar) - Create a new Pull Request
License
MIT License © 2022-PRESENT Jevon617
No vulnerabilities found.
No security vulnerabilities found.