vue中使用svg

创建以下文件夹

安装svg-sprite-loader：       npm i -D svg-sprite-loader

---

SvgIcon文件内容：

  .svg-icon {

    width: 1em;

    height: 1em;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden;

  }

---

index.js文件内容：

import Vue from 'vue'

import SvgIcon from '../components/SvgIcon' // svg组件

// 注册到全局

Vue.component('svg-icon', SvgIcon)

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

const req = require.context('./svg', false, /\.svg$/)

requireAll(req)

---

在webpack.base.conf.js中配置svg依赖

在module里找到 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,位置进行修改

module: {

    rules: [

{

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        loader: 'url-loader',

        exclude: [resolve('src/icons')], // 去除你存放svg的那个文件夹，改用svg-loader处理

        options: {

          limit: 10000,

          name: utils.assetsPath('img/[name].[hash:7].[ext]')

        }

      },

      {

        test: /\.svg$/,

        loader: 'svg-sprite-loader',

        options: {

          symbolId: 'icon-[name]'

        },

        include: [resolve('src/icons')] // 把上面去掉的文件夹include进来

      },

---

最后在main.js里面引入icons文件夹下的index.js

import '@/icons/index'

---

就可以在vue文件下通过