文章目录前置知识vue3vite自定义svg图标组件1、安装 vite-plugin-svg-icons2、创建图标文件夹3、vite.config.js 插件配置4、SvgIcon组件封装5、main.js 引入注册脚本6、Home.vue中使用SvgIcon组件7、图标选择器IconSelect.vueHome.vue中使用IconSelectvue2自定义svg图标组件1. 安装svg-sprite-loader2. 创建图标所在文件夹3. 配置vue.config.js4. SvgIcon.vue图标组件封装5.创建svg文件的入口文件icon.js6.main.js中引入icon.js7. Home.vue中使用SvgIcon组件可参考未来必热SVG Sprites技术介绍懒人神器svg-sprite-loader实现自己的Icon组件在Vue3项目中使用svg-sprite-loader前置知识在页面中虽然可以通过如下的方式使用img标签来引入svg图标。但是如果这个路径很长也是比较麻烦的。imgsrc./svg/icon.svg/在svg里面可以在文档中先定义Symbol然后svg使用的时候只须通过标识去引用指定的svg即可Symbol的放置顺序不一定要在最前面案例如下htmlheadmetacharsetutf-8titleSVG Sprite使用/titlestyleli{font-size:14px;margin-top:5px;color:#369;}.webicon{width:16px;height:16px;margin-right:5px;vertical-align:-2px;fill:#369;}/style/headbodydivstyledisplay:none;svgsymbolidliwuviewBox-80 -72.013 160 144.025pathdM-71.949-16.039h55.974v-55.974h-55.974V-16.039z M16.102-16.039h55.975v-55.974H16.102V-16.039z M-80,32.013h64.025v-40H-80V32.013z M80,32.013v-40H16.102v40H80z M-7.923,32.013H8.051V-72.013H-7.923V32.013z M16.102,39.936 h-32.077v24.025h32.077V39.936z M64.025,39.936h-40l15.719,32.077h24.281V39.936z M-23.898,39.936h-40v32.077H-40L-23.898,39.936ztransformmatrix(1 0 0 -1 0 0)/path/symbolsymbolidqianbiviewBox-79.5 -79.5 159 159pathdM79.5,32.802l-93.538-93.538l-46.699,46.699L32.802,79.5L79.5,32.802z M-79.5-32.802L-32.802-79.5H-79.5 V-32.802ztransformmatrix(1 0 0 -1 0 0)/path/symbolsymbolidshangchuanviewBox-73.623 -78.055 147.245 156.11pathdM0.069,32.482L64.48-32.205H36.915v-45.85h-73.83l-0.139,45.85h-27.15L0.069,32.482z M73.623,78.055V59.632 H-73.623v18.423H73.623ztransformmatrix(1 0 0 -1 0 0)/path/symbol/svg/divh3SVG Sprite使用示意/h3ullisvgclasswebiconusexlink:href#qianbi/use/svg编辑信息/lilisvgclasswebiconusexlink:href#liwu/use/svg兑换礼物/lilisvgclasswebiconusexlink:href#shangchuan/use/svg上传文件/li/ul/div/body/htmlvue3vite自定义svg图标组件可参考Vue3后台管理系统四SVG图标1、安装 vite-plugin-svg-iconsnpm i fast-glob3.2.11-Dnpm i vite-plugin-svg-icons2.0.1-D2、创建图标文件夹在src/assets文件夹下新建icons文件夹用于存放下载的 SVG 图标3、vite.config.js 插件配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueimportpathfrompathimport{createSvgIconsPlugin}fromvite-plugin-svg-icons;// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),src/assets/icons)],// 指定symbolId格式symbolId:icon-[dir]-[name],})],resolve:{alias:{:path.resolve(__dirname,./src)}}})4、SvgIcon组件封装!--src/components/SvgIcon/index.vue--templatesvg aria-hiddentrueclasssvg-icon:stylewidth: size ;height: sizeuse:xlink:hrefsymbolId:fillcolor//svg/templatescript setup langtsimport{computed}fromvue;constpropsdefineProps({prefix:{type:String,default:icon},iconClass:{type:String,required:false},color:{type:String},size:{type:String,default:1em}});constsymbolIdcomputed(()#${props.prefix}-${props.iconClass});/scriptstyle scoped.svg-icon{overflow:hidden;fill:currentColor;}/style5、main.js 引入注册脚本import{createApp}fromvueimport./style.cssimportAppfrom./App.vueimportrouterfrom/routerimportstorefrom/store// 不知道这个东西是哪来的但是没它的话html下面就没有那个Symbol的定义了importvirtual:svg-icons-register;importSvgIconfrom/components/SvgIcon/index.vueconstappcreateApp(App)app.use(router)app.use(store)// 注册全局组件app.component(SvgIcon,SvgIcon)app.mount(#app)6、Home.vue中使用SvgIcon组件templatehomesvg-iconicon-classtreesize40px/svg-iconicon-classtree2size50px//templatescriptsetup/scriptstylelangscss/style7、图标选择器IconSelect.vue在src/components文件夹下新建IconSelect文件夹并在IconSelect文件夹下新建index.vuetemplatedivclassicon-selectel-inputv-modeliconNameclearableplaceholder请输入图标名称clearfilterIconsinputfilterIconstemplate#suffixiclassel-icon-search el-input__icon//template/el-inputdivclassicon-select__listdivv-for(item, index) in iconList:keyindexclickselectedIcon(item)svg-iconcolor#999:icon-classitemstyleheight:30px;width:16px;margin-right:5px/span{{ item }}/span/div/div/div/templatescriptsetupimport{ref}fromvue;importSvgIconfrom/components/SvgIcon/index.vue;consticons[];constmodulesimport.meta.glob(../../assets/icons/*.svg);for(constpathinmodules){constppath.split(assets/icons/)[1].split(.svg)[0];icons.push(p);}consticonListref(icons);consticonNameref();constemitdefineEmits([selected]);functionfilterIcons(){iconList.valueicons;if(iconName.value){iconList.valueicons.filter(itemitem.indexOf(iconName.value)!-1);}}functionselectedIcon(name){emit(selected,name);document.body.click();}functionreset(){iconName.value;iconList.valueicons;}defineExpose({reset});/scriptstylelangscssscoped.icon-select{width:100%;padding:10px;__list{height:200px;overflow-y:scroll;div{height:30px;line-height:30px;margin-bottom:-5px;cursor:pointer;width:33%;float:left;}span{display:inline-block;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}}}/styleHome.vue中使用IconSelecttemplatehome!-- svg-icon icon-classtree size40px/ svg-icon icon-classtree2 size50px/ --divstylewidth:300pxicon-selectselectedselected/icon-select/div/templatescriptsetupimportIconSelectfrom/components/IconSelect/index.vueimport{reactive,ref}fromvue;conststatereactive({icon:,})functionselected(name){console.log(state.icon)state.iconname;}/scriptstylelangscss/stylevue2自定义svg图标组件1. 安装svg-sprite-loadernpm install svg-sprite-loader-D2. 创建图标所在文件夹在项目 src 目录下新建 src/icons/svg 目录存放 svg 图标文件。3. 配置vue.config.jsconst{defineConfig}require(vue/cli-service)constpathrequire(path)constresolvedirpath.join(__dirname,dir)module.exportsdefineConfig({transpileDependencies:true,chainWebpack(config){// 配置 svg-sprite-loaderconfig.module.rule(svg).exclude.add(resolve(src/icons)).end()config.module.rule(icons).test(/\.svg$/).include.add(resolve(src/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId:icon-[name]}).end()}})4. SvgIcon.vue图标组件封装在src/components下创建SvgIcon.vue或者在src/components下创建SvgIcon文件夹在里边创建index.vuetemplatesvgclassNamesvg-iconaria-hiddentrueuse:xlink:hreficonName//svg/templatestyle.svg-icon{width:1.5em;height:1.5em;}/stylescriptexportdefault{props:{iconClass:{type:String,required:true}},computed:{iconName(){return#icon-${this.iconClass}}}}/script5.创建svg文件的入口文件icon.js在 src/icons 下创建 icons 目录的入口文件 index.js 负责svg文件的加载importVuefromvueimportSvgIconfrom/components/SvgIconVue.component(svg-icon,SvgIcon)/** * require.context 的参数说明 * ./svg 代表要查找的文件路径 * false 代表是否查找子目录 * /\.svg$/ 代表要匹配文件的正则 * */constsvgrequire.context(./svg,false,/\.svg$/)constrequireAll(requireContext)requireContext.keys().map(requireContext)requireAll(svg)6.main.js中引入icon.jsimportVuefromvueimportAppfrom./App.vueimportrouterfrom./routerimportstorefrom./storeimport/iconsVue.config.productionTipfalsenewVue({router,store,render:hh(App)}).$mount(#app)7. Home.vue中使用SvgIcon组件templatedivHomesvg-iconicon-classtree/svg-iconsvg-iconicon-classtree2/svg-icon/div/templatescriptexportdefault{name:Home,components:{}}/scriptstyle/style 
长河君 · 2026/10/1 1:52:07 · 阅读 1.2k vue23自定义svg图标组件
文章目录前置知识vue3vite自定义svg图标组件1、安装 vite-plugin-svg-icons2、创建图标文件夹3、vite.config.js 插件配置4、SvgIcon组件封装5、main.js 引入注册脚本6、Home.vue中使用SvgIcon组件7、图标选择器IconSelect.vueHome.vue中使用IconSelectvue2自定义svg图标组件1. 安装svg-sprite-loader2. 创建图标所在文件夹3. 配置vue.config.js4. SvgIcon.vue图标组件封装5.创建svg文件的入口文件icon.js6.main.js中引入icon.js7. Home.vue中使用SvgIcon组件可参考未来必热SVG Sprites技术介绍懒人神器svg-sprite-loader实现自己的Icon组件在Vue3项目中使用svg-sprite-loader前置知识在页面中虽然可以通过如下的方式使用img标签来引入svg图标。但是如果这个路径很长也是比较麻烦的。imgsrc./svg/icon.svg/在svg里面可以在文档中先定义Symbol然后svg使用的时候只须通过标识去引用指定的svg即可Symbol的放置顺序不一定要在最前面案例如下htmlheadmetacharsetutf-8titleSVG Sprite使用/titlestyleli{font-size:14px;margin-top:5px;color:#369;}.webicon{width:16px;height:16px;margin-right:5px;vertical-align:-2px;fill:#369;}/style/headbodydivstyledisplay:none;svgsymbolidliwuviewBox-80 -72.013 160 144.025pathdM-71.949-16.039h55.974v-55.974h-55.974V-16.039z M16.102-16.039h55.975v-55.974H16.102V-16.039z M-80,32.013h64.025v-40H-80V32.013z M80,32.013v-40H16.102v40H80z M-7.923,32.013H8.051V-72.013H-7.923V32.013z M16.102,39.936 h-32.077v24.025h32.077V39.936z M64.025,39.936h-40l15.719,32.077h24.281V39.936z M-23.898,39.936h-40v32.077H-40L-23.898,39.936ztransformmatrix(1 0 0 -1 0 0)/path/symbolsymbolidqianbiviewBox-79.5 -79.5 159 159pathdM79.5,32.802l-93.538-93.538l-46.699,46.699L32.802,79.5L79.5,32.802z M-79.5-32.802L-32.802-79.5H-79.5 V-32.802ztransformmatrix(1 0 0 -1 0 0)/path/symbolsymbolidshangchuanviewBox-73.623 -78.055 147.245 156.11pathdM0.069,32.482L64.48-32.205H36.915v-45.85h-73.83l-0.139,45.85h-27.15L0.069,32.482z M73.623,78.055V59.632 H-73.623v18.423H73.623ztransformmatrix(1 0 0 -1 0 0)/path/symbol/svg/divh3SVG Sprite使用示意/h3ullisvgclasswebiconusexlink:href#qianbi/use/svg编辑信息/lilisvgclasswebiconusexlink:href#liwu/use/svg兑换礼物/lilisvgclasswebiconusexlink:href#shangchuan/use/svg上传文件/li/ul/div/body/htmlvue3vite自定义svg图标组件可参考Vue3后台管理系统四SVG图标1、安装 vite-plugin-svg-iconsnpm i fast-glob3.2.11-Dnpm i vite-plugin-svg-icons2.0.1-D2、创建图标文件夹在src/assets文件夹下新建icons文件夹用于存放下载的 SVG 图标3、vite.config.js 插件配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueimportpathfrompathimport{createSvgIconsPlugin}fromvite-plugin-svg-icons;// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),src/assets/icons)],// 指定symbolId格式symbolId:icon-[dir]-[name],})],resolve:{alias:{:path.resolve(__dirname,./src)}}})4、SvgIcon组件封装!--src/components/SvgIcon/index.vue--templatesvg aria-hiddentrueclasssvg-icon:stylewidth: size ;height: sizeuse:xlink:hrefsymbolId:fillcolor//svg/templatescript setup langtsimport{computed}fromvue;constpropsdefineProps({prefix:{type:String,default:icon},iconClass:{type:String,required:false},color:{type:String},size:{type:String,default:1em}});constsymbolIdcomputed(()#${props.prefix}-${props.iconClass});/scriptstyle scoped.svg-icon{overflow:hidden;fill:currentColor;}/style5、main.js 引入注册脚本import{createApp}fromvueimport./style.cssimportAppfrom./App.vueimportrouterfrom/routerimportstorefrom/store// 不知道这个东西是哪来的但是没它的话html下面就没有那个Symbol的定义了importvirtual:svg-icons-register;importSvgIconfrom/components/SvgIcon/index.vueconstappcreateApp(App)app.use(router)app.use(store)// 注册全局组件app.component(SvgIcon,SvgIcon)app.mount(#app)6、Home.vue中使用SvgIcon组件templatehomesvg-iconicon-classtreesize40px/svg-iconicon-classtree2size50px//templatescriptsetup/scriptstylelangscss/style7、图标选择器IconSelect.vue在src/components文件夹下新建IconSelect文件夹并在IconSelect文件夹下新建index.vuetemplatedivclassicon-selectel-inputv-modeliconNameclearableplaceholder请输入图标名称clearfilterIconsinputfilterIconstemplate#suffixiclassel-icon-search el-input__icon//template/el-inputdivclassicon-select__listdivv-for(item, index) in iconList:keyindexclickselectedIcon(item)svg-iconcolor#999:icon-classitemstyleheight:30px;width:16px;margin-right:5px/span{{ item }}/span/div/div/div/templatescriptsetupimport{ref}fromvue;importSvgIconfrom/components/SvgIcon/index.vue;consticons[];constmodulesimport.meta.glob(../../assets/icons/*.svg);for(constpathinmodules){constppath.split(assets/icons/)[1].split(.svg)[0];icons.push(p);}consticonListref(icons);consticonNameref();constemitdefineEmits([selected]);functionfilterIcons(){iconList.valueicons;if(iconName.value){iconList.valueicons.filter(itemitem.indexOf(iconName.value)!-1);}}functionselectedIcon(name){emit(selected,name);document.body.click();}functionreset(){iconName.value;iconList.valueicons;}defineExpose({reset});/scriptstylelangscssscoped.icon-select{width:100%;padding:10px;__list{height:200px;overflow-y:scroll;div{height:30px;line-height:30px;margin-bottom:-5px;cursor:pointer;width:33%;float:left;}span{display:inline-block;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}}}/styleHome.vue中使用IconSelecttemplatehome!-- svg-icon icon-classtree size40px/ svg-icon icon-classtree2 size50px/ --divstylewidth:300pxicon-selectselectedselected/icon-select/div/templatescriptsetupimportIconSelectfrom/components/IconSelect/index.vueimport{reactive,ref}fromvue;conststatereactive({icon:,})functionselected(name){console.log(state.icon)state.iconname;}/scriptstylelangscss/stylevue2自定义svg图标组件1. 安装svg-sprite-loadernpm install svg-sprite-loader-D2. 创建图标所在文件夹在项目 src 目录下新建 src/icons/svg 目录存放 svg 图标文件。3. 配置vue.config.jsconst{defineConfig}require(vue/cli-service)constpathrequire(path)constresolvedirpath.join(__dirname,dir)module.exportsdefineConfig({transpileDependencies:true,chainWebpack(config){// 配置 svg-sprite-loaderconfig.module.rule(svg).exclude.add(resolve(src/icons)).end()config.module.rule(icons).test(/\.svg$/).include.add(resolve(src/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId:icon-[name]}).end()}})4. SvgIcon.vue图标组件封装在src/components下创建SvgIcon.vue或者在src/components下创建SvgIcon文件夹在里边创建index.vuetemplatesvgclassNamesvg-iconaria-hiddentrueuse:xlink:hreficonName//svg/templatestyle.svg-icon{width:1.5em;height:1.5em;}/stylescriptexportdefault{props:{iconClass:{type:String,required:true}},computed:{iconName(){return#icon-${this.iconClass}}}}/script5.创建svg文件的入口文件icon.js在 src/icons 下创建 icons 目录的入口文件 index.js 负责svg文件的加载importVuefromvueimportSvgIconfrom/components/SvgIconVue.component(svg-icon,SvgIcon)/** * require.context 的参数说明 * ./svg 代表要查找的文件路径 * false 代表是否查找子目录 * /\.svg$/ 代表要匹配文件的正则 * */constsvgrequire.context(./svg,false,/\.svg$/)constrequireAll(requireContext)requireContext.keys().map(requireContext)requireAll(svg)6.main.js中引入icon.jsimportVuefromvueimportAppfrom./App.vueimportrouterfrom./routerimportstorefrom./storeimport/iconsVue.config.productionTipfalsenewVue({router,store,render:hh(App)}).$mount(#app)7. Home.vue中使用SvgIcon组件templatedivHomesvg-iconicon-classtree/svg-iconsvg-iconicon-classtree2/svg-icon/div/templatescriptexportdefault{name:Home,components:{}}/scriptstyle/style