1.文件下新建SvgIcon文件夹以及子文件index.js，index.vue，svg文件夹（用于存放svg图片） 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template><

vue3使用svg图标安装//通过命令安装2个插件npmivite-plugin-svg-icons-Dnpmifast-glob-D在vue.config.js中配置//vue.config.jsimport{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-v

开发背景nodev18.17.0(node-v)npmv8.4.1(npm-v)@vue/cli5.0.8(vue-V)0.SvgIcon全局组件全局组件是指在应用程序的任何位置使用的组件，使用全局组件前需要在Vus.js实例中注册，并将其挂载到实例中。全局组件是可复用的Vus.js实例。1.安装依赖svg-sprite-loadernpm

背景svg作为矢量图，放大不失真，但是如果在vue文件中直接引入svg的话会导致vue文件过长，不友好。想要在组件中使用的时候使用下面的方式来引入svg//svg-name的值就是svg图片的名称<svg-iconsvg-name="xueren"/>步骤在components下创建SvgIcon.vue文件,并引入assets/icons/sv

vue版本  vue:"^2.6.11"1.下载对应的svg依赖npminstallsvg-sprite-loader--save-dev2.创建svgIcon文件夹文件夹下对应3个文件svg文件夹：存放svg文件index.js文件：vue挂载svgindex.vue文件：封装的svg文件 3.index.js文件全局挂载到vue上1importVue

  对于后台管理框架，经常要用到自定义的svg来当做路由的icon图标。https://mmf-fe.github.io/svgicon，这是这款插件的地址。这里总结下在vue3+vite中使用改插件的方式。安装yarnadd@yzfe/svgicon@yzfe/vue3-svgiconyarnaddvite-plugin-svgicon--dev配置vit

富文本wangeditor官网：wangeditor日期处理类moment.js官网：moment.jscss样式重置normalize.css官网：normalize.csssvg图标svg-sprite-loader安装依赖 npminstal

这里使用vite-plugin-svg-icons插件yarnaddvite-plugin-svg-icons-D#ornpmivite-plugin-svg-icons-D#orpnpminstallvite-plugin-svg-icons-D在vite.con

主要是介绍下SVG图标组件在Vue2.x中的配置流程首先，假设你有一个图标为：calculator.svg最后想要通过下图的这种方式来使用它： 遵循以下步骤便可以实现：1.先编写一个Sv

1、安装依赖插件vite-plugin-svg-iconsyarnaddvite-plugin-svg-icons-D2、安装glob不安装会提示Error:Cannotfindmodule'fast-glob'yarnaddfast-glob-D3、

1、基础工作都是引用了svg-sprite-loader这个插件  npmisvg-sprite-loader--save2、写一个Svglcon的组件（components/Svglcon），在components目录下新建一个SvgIcon文

1.文件下新建SvgIcon文件夹以及子文件index.js，index.vue，svg文件夹（用于存放svg图片） 2.编写index.vue组件<template><svg:class="svgClass"aria-hidden="true">

<svg-iconslot="prefix"icon-class="user"class="el-input__iconinput-icon"/>  用法   <el-inputtype="text"auto-complete="off"placeholder="账号">