Gathering detailed insights and metrics for @suxhk/unplugin-svg-component
Gathering detailed insights and metrics for @suxhk/unplugin-svg-component
Gathering detailed insights and metrics for @suxhk/unplugin-svg-component
Gathering detailed insights and metrics for @suxhk/unplugin-svg-component
generate a vue/react component through svg files, supporting svg file HMR, Tree-shaking, SSR and TS hint.
npm install @suxhk/unplugin-svg-component
Typescript
Module System
Node Version
NPM Version
TypeScript (97.81%)
HTML (0.84%)
Vue (0.79%)
JavaScript (0.56%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
64 Stars
160 Commits
8 Forks
1 Watchers
1 Branches
3 Contributors
Updated on Jul 01, 2025
Latest Version
0.0.2
Package Id
@suxhk/unplugin-svg-component@0.0.2
Unpacked Size
133.40 kB
Size
13.80 kB
File Count
21
NPM Version
8.19.4
Node Version
16.20.2
Published on
May 23, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
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.
1yarn add unplugin-svg-component -D 2# or 3npm i unplugin-svg-component -D 4# or 5pnpm install unplugin-svg-component -D
1// vite.config.ts 2import { defineConfig } from 'vite' 3import UnpluginSvgComponent from 'unplugin-svg-component/vite' 4 5export default defineConfig({ 6 plugins: [ 7 UnpluginSvgComponent({ /* options */ }), 8 ], 9})
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})
1// webpack.config.js 2const UnpluginSvgComponent = require('unplugin-svg-component/webpack').default 3 4module.exports = { 5 /* ... */ 6 plugins: [ 7 UnpluginSvgComponent({ /* options */ }), 8 ], 9}
1// rollup.config.js 2import UnpluginSvgComponent from 'unplugin-svg-component/rollup' 3 4export default { 5 plugins: [ 6 UnpluginSvgComponent({ /* options */ }), 7 ], 8}
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})
1// main.ts 2import SvgIcon from '~virtual/svg-component' 3 4app.component(SvgIcon.name, SvgIcon)
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}
svgNames
/ type SvgName
1// all svg icon name 2import { svgNames } from '~virtual/svg-component' 3 4// type SvgName = "icon-icon-addUser" | "icon-icon-barCode" 5import type { SvgName } from '~virtual/svg-component'
Parameter | Type | Default | Description |
---|---|---|---|
iconDir | string | 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 |
treeShaking | boolean | false | whether enable tree-shaking |
scanGlob | string[] | look this way | the glob pattern used in tree-shaking |
scanStrategy | text | component | (code: string[], options: Options)=>string[] | component | the strategy used for tree-shaking will not be bundled into the final bundle if it is not successfully matched. The text option indicates matching by svg name, so you should ensure the uniqueness of your svg name (you can consider customizing it with the 'symbolIdFormatter' option) to avoid erroneous tree-shaking, while the default value of the component option indicates matching by component as a whole, In addition, you can also implement a tree-shaking strategy by passing a function whose return value represents the set of SVG icons used. |
1// tsconfig.json 2{ 3 "include": ["svg-component.d.ts", "svg-component-global.d.ts"] 4}
You can refer to examples as required. Note that the configuration in examples is the default configuration.
git checkout -b feature/fooBar
)git commit -am 'Add some fooBar'
)git push origin feature/fooBar
)MIT License © 2022-PRESENT Jevon617
No vulnerabilities found.
No security vulnerabilities found.