Vue - vue2 项目中使用svg 图标

在Vue项目中使用SVG图标可以提高加载速度并方便自定义，以下是几种常见的实现方式：

方法一：直接导入SVG文件（推荐）

首先创建一个全局组件 SvgIcon.vue：

<template>
  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs">
    <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}`
      }
      return 'svg-icon'
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

然后创建一个 svg 目录专门存放图标，并编写自动导入脚本：

// src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue' // 路径根据实际情况调整

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

// 自动导入所有svg文件
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

在 main.js 中引入该脚本：

import './icons' // 引入svg图标

最后在项目中使用：

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

方法二：使用vue-svg-loader（简化导入）

首先安装依赖：

npm install vue-svg-loader --save-dev

然后在 vue.config.js 中配置：

module.exports = {
  chainWebpack: config => {
    // 移除已有的svg规则
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    
    // 添加新的svg-loader配置
    svgRule
      .test(/\.svg$/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

在组件中直接导入使用：

<template>
  <div>
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/assets/icons/my-icon.svg'

export default {
  components: {
    MyIcon
  }
}
</script>

方法三：使用第三方库（如vue-awesome）

安装依赖：

npm install vue-awesome@next

在 main.js 中全局注册：

import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'

Vue.component('v-icon', Icon)

在组件中使用：

<v-icon name="github" />
<v-icon name="user" class="text-primary" />

推荐做法

建议结合使用方法一和方法二：

1. 创建一个 SvgIcon 全局组件处理图标
2. 使用 vue-svg-loader 简化 SVG 文件的导入
3. 为图标添加统一的样式和交互效果

这样可以获得最佳的开发体验和性能表现。如果需要管理大量图标，还可以考虑使用 iconfont 等工具生成 SVG 雪碧图。