vue安装svg 依赖包

终端安装 npm

npm install svg-sprite-loader --save-dev

自定义组件

svg_1.png

在src新建icons 文件夹 及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下

svg_3.png

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

// register globally 全局注册
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)
// （创建了）一个包含了 svg 文件夹（不包含子目录）下面的、所有文件名以 `.suv` 结尾的、能被 require 请求到的文件的上下文。
// 这个是webpack提供的require方法，可以创建上下文环境。相当于将svg目录下的svg文件require进来。
requireAll(req)

在main.js 需要引用

svg_4.png

在某个页面.vue 用法

重要！！！！！！！！

还需要配置svg环境

在根目录创建vue.config.js

// vue.config.js
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    // 一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

这样就成功了 O(∩_∩)O