vue中使用svg

创建以下文件夹

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

---

SvgIcon文件内容：

<template>

  <svg :class="svgClass" aria-hidden="true">

    <use :xlink:href="iconName"/>

  </svg>

</template>

<script>

  export default {

    name: 'SvgIcon',

    props: {

      iconClass: {

        type: String,

        required: true

      },

      className: {

        type: String,

        default: ''

      }

    },

    computed: {

      iconName() {

        return `#icon-${this.iconClass}`

      },

      svgClass() {

        if (this.className) {

          return 'svg-icon ' + this.className

        } else {

          return 'svg-icon'

        }

      }

    }

  }

</script>

<style scoped>

  .svg-icon {

    width: 1em;

    height: 1em;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden;

  }

</style>

---

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文件下通过

<svg-icon  icon-class="下载在svg文件夹下对应文件的名字（不含.svg后缀）"></svg-icon>