vue项目中如何直接在标签中使用svg图标？
比如想这样<icon-svg icon-class="round" name="round"></icon-svg>使用svg该怎么配置呢？

1.首先需要使用 svg-sprite-loader 来加载svg格式的文件

安装svg-sprite-loader:

npm install svg-sprite-loader --save

2.新建存放svg的目录

在src目录下新建icons目录，再新建svg目录：“src/icons/svg”，新建加载svg的脚本文件index.js,路径：“src/icons/index.js”,创建后目录结构如下：

image.png

编写加载svg的脚本src/icons/index.js：

import Vue from 'vue'
import IconSvg from '@/components/icon-svg'

Vue.component('IconSvg', IconSvg)

const svgFiles = require.context('./svg', true, /\.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))

export default {
  getNameList () {
    return iconList.map(item => item.default.id.split('-')[1])
  }
}

3.新建svg显示组件

在“src/components”目录下新建icon-svg目录，新建svg显示组件index.vue,目录为“src/components/icon-svg/index.vue”
建好后目录结构如下：

image.png

编写svg显示组件代码src/components/icon-svg/index.vue：

<template>
  <svg
    :class="getClassName"
    :width="width"
    :height="height"
    aria-hidden="true">
    <use :xlink:href="getName"></use>
  </svg>
</template>
<script>
  export default {
    name: 'icon-svg',
    props: {
      name: {
        type: String,
        required: true
      },
      className: {
        type: String
      },
      width: {
        type: String
      },
      height: {
        type: String
      }
    },
    computed: {
      getName () {
        return `#icon-${this.name}`
      },
      getClassName () {
        return [
          'icon-svg',
          `icon-svg__${this.name}`,
          this.className && /\S/.test(this.className) ? `${this.className}` : ''
        ]
      }
    }
  }
</script>
<style>
  .icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

4.修改webpack配置

在项目结构中找到 “build/webpack.base.config.js”,修改webpack.base.config.js其中的module - rules部分，找到 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/配置：

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
     },

在loader后面增加一行exclude: [resolve('src/icons')],用来例外svg：

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
     },

再增加一个test规则，用来指定加载svg格式的文件（使用svg-sprite-loader加载）：

    {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')]
    },

修改后的build/webpack.base.config.js配置如下：

     {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')]
      }

5.添加svg图标并使用

下载好svg格式的图标，放入目录“src/icons/svg”中，修改svg的名字为 icon-[name] 结构。如：icon-round.svg
在vue模板中使用svg：

<icon-svg icon-class="round" name="round"></icon-svg>

通过css设置图标大小和颜色，就可以看到漂亮的svg图标啦！

完——