vue使用本地svg

在上一章完成登录页面基本结构之后，svg虽然也写进去了，可怎么都不显示，这章就是解决这个问题。

在vue项目中使用svg，按照EL-ADMIN 后台管理系统模仿写，可是到了页面怎么都不显示图标，网上查了很多资料，最终搞定了，唉！

1.vue项目中src目录下创建icons文件夹，再创建子文件夹svg，将svg图标资源都放到这里

svg1.png

2.再创建入口文件index.js,代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // SvgIcon组件

// register globally
Vue.component('svg-icon', SvgIcon)

// require.context,通过正则匹配到文件，全部引入
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

3.SvgIcon组件
在components文件夹下添加SvgIcon文件夹，文件夹中添加入口index.vue来定义组件，代码如下：

xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名(没懂，呵呵)

4.vue项目入口main.js文件中引入icons

import './icons' // icon 引入icons文件夹下所有的svg

5.修改webpack配置
修改webpack.base.conf.js配置文件(之前一直调不通，就去看手摸手，带你优雅的使用 icon,一直没注意到这里，我就一直查呀查。。。)

svg2.png

下面就需要导入svg-sprite-loader在package.json配置添加

 "devDependencies": {
    "svg-sprite-loader": "3.8.0",
 }

在手动 npm i重新导入

6.项目中使用方式如下，icon-class后面跟svg的名称

7.预览效果图

svg3.png

参考：手摸手，带你优雅的使用 icon

​ webpack中的require.context

​ vue中使用本地svg，抽为全局组件svg-icon

​ vue运行项目提示svg找不到