7.Vue3.0全局使用svg

一、安装svg-sprite-loader

npm install svg-sprite-loader -D

二、编写svg-icon组件

在 src/components/icon 文件夹下面创建 svg-icon.vue 文件:

svg组件

三、配置全局使用以及名字处理

在 src/assets/icons 下面创建 index.js 以及 icons 文件夹

icons 文件夹下面存放 .svg 文件

index.js 文件中：

四、全局引入

在 main.js 中引入

import '@/assets/icons'

五、配置

在vue2.0中是需要在 webpack.base.conf.js 中进行配置：

在vue3.0也是如此 需要在根目录下 vue.config.js 中进行配置 如下：

到此就可以全局使用svg图标了