Gathering detailed insights and metrics for unplugin-svg-component
Gathering detailed insights and metrics for unplugin-svg-component
generate a vue/react component through svg files, supporting svg file HMR, Tree-shaking, SSR and TS hint.
0.12.1
64
MIT
TypeScript
135.34 kB
Installations
npm install unplugin-svg-componentDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.11.0
NPM Version
10.2.4
Score
62.8
Supply Chain
93
Quality
75.2
Maintenance
100
Vulnerability
91.4
License
Releases
35
Languages
4
TypeScript
HTML
Vue
JavaScript
TypeScript (97.81%)
HTML (0.84%)
Vue (0.79%)
JavaScript (0.56%)
Developer
jevon617
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
64 Stars
160 Commits
9 Forks
1 Watchers
1 Branches
3 Contributors
Updated on Jul 01, 2025
Maintainers
1
Package Meta Information
Latest Version
0.12.1
Package Id
unplugin-svg-component@0.12.1
Unpacked Size
135.34 kB
Size
15.40 kB
File Count
26
NPM Version
10.2.4
Node Version
20.11.0
Published on
Dec 04, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
unplugin-svg-component
English | 中文
unplugin-svg-component 启发于vite-plugin-svg-icons,它将本地的svg文件生成为一个 vue/react 组件, 通过该组件结合svg文件的名称使用svg图标。
智能提示效果
Vue
React
功能
- 智能提示: 使用组件时, 配合 Typescript 会提示出 svg 文件名称
- 热更新: svg 文件的增删改操作, 都会实时显示于页面上, 无需刷新浏览器
- Vue & React 支持: 自动检测项目类型
- Tree-shaking: 从v0.5.0版本开始, 生产环境只会打包你用到的 svg 图标
- SSR: 通过开启
option.domInsertionStrategy = 'replaceHtml'这个选项(默认开启)支持SSR.
安装
1yarn add unplugin-svg-component -D 2# or 3npm i unplugin-svg-component -D 4# or 5pnpm install unplugin-svg-component -D
使用
Vite config
1// vite.config.ts 2import UnpluginSvgComponent from 'unplugin-svg-component/vite' 3 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' 3 4app.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}
获取svgNames / 类型 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'
插件配置
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| iconDir | string | string[] | - | 图标文件夹位置 |
| projectType | vue | react | auto | auto | 项目类型, 默认会自动检测 |
| dts | boolean | - | 是否生成d.ts文件 |
| dtsDir | string | - | d.ts文件位置 |
| prefix | string | - | 给每个svg name加上前缀,使用时记得加上这个前缀 |
| componentName | string | SvgIcon | 生成的组件名称 |
| componentStyle | string | width: 1em; height: 1em; fill:currentColor; | 组件的行内样式 |
| preserveColor | RegExp | - | 通常, 插件会把svg标签内的fill, stroke属性替换成currentColor, 此属性会对每个svg路径进行正则匹配, 匹配成功的svg则不会替换currentColor, 而是保留原有的颜色. |
| symbolIdFormatter | (svgName:string, prefix: string)=>string | code | 可以通过这个参数来设置symbolId的格式 |
| optimizeOptions | SvgoOptions | - | svgo 的优化参数 |
| svgSpriteDomId | string | svg_sprite__dom | 自定义生成的svg元素的id |
| vueVersion | 2 | 3 | auto | auto | Vue 版本, 默认会自动检测 |
| treeShaking | boolean | true | 是否开启tree-shaking |
| scanGlob | string[] | code | 用于 tree-shaking 的模式匹配路径 |
| scanStrategy | text | component | (code: string[], options: Options)=>string[] | component | 用于 tree-shaking 的模式匹配策略, 未匹配成功则不会打包到最终的产物中去, text选项表示按图标名称匹配, 所以你应该保证你图标名称的唯一性(可以考虑用symbolIdFormatter选项定制)，以此避免错误的tree-shaking, 而默认值component表示的是按组件这一整体进行匹配, 此外你也可以通过传递函数的方式来实现 tree-shaking 策略, 函数的返回值表示用到的 svg 图标合集。 |
| domInsertionStrategy | replaceHtml | dynamic | replaceHtml | 控制注入SVG元素的方法,replaceHtml（默认）：在服务端通过替换HTML字符串来注入SVG元素; dynamic：在浏览器端,通过JavaScript动态地注入SVG元素。警告：如果您处于服务器端渲染（ssr）模式，您应该使用replaceHtml策略。 |
Typescript 支持
1// tsconfig.json 2{ 3 "include": ["svg-component.d.ts", "svg-component-global.d.ts"] 4}
最佳实践
可以根据需求参考examples, 注意 examples 中的配置都是默认配置.
Contributing
- Fork (https://github.com/Jevon617/unplugin-svg-component/fork)
- 新建一个分支 (
git checkout -b feature/fooBar) - 提交你的代码 (
git commit -am 'Add some fooBar') - 提交到你的远程分支 (
git push origin feature/fooBar) - 提交PR
License
MIT License © 2022-PRESENT Jevon617
No vulnerabilities found.
No security vulnerabilities found.