# 在vue项目中使用SVG
> 本文包含了在vue项目中使用SVG的方法, 包含vue2.x和vue3.x

## vue2.x使用
#c 依赖组件介绍
我们主要使用 `svg-sprite-loader` 来引入组件  
使用webpack中的require.context来批量引入svg文件

#d 新旧vue cli 差异
> [新版本vue cli项目无法生效参考文章](https://juejin.cn/post/7133523073680015396)  

在新版本的vue cli项目中更改了svg文件的加载方式  
所以我们需要将新版本的svg加载项进行更改, 删除新增的内容


#e 配置svg文件的加载
vue.config.js 配置如下
```js

const path = require('path')
function resolve(dir) {
    // console.log(dir);
    return path.join(__dirname, dir);
}


module.exports = defineConfig({
    ...outherConfig,
    chainWebpack: config => {
        config.plugin('define').tap(args=>{
            const argv = process.argv
            const icourt = argv[argv.indexOf('--icourt-mode') + 1]
            args[0]['process.env'].MODE = `"${icourt}"`
            return args
        })
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        // 清除已有的svg loader https://juejin.cn/post/7133523073680015396
        svgRule.delete('type');
        svgRule.delete('generator');
        svgRule.exclude.add(/noe_modules/)
        svgRule
            .test(/\.svg/)
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
        const imagesRule = config.module.rule('images')
        imagesRule.exclude.add(resolve('./src/assets/svg'))
        // console.log('imagesRule',imagesRule)
        config.module
            .rule('images')
            .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)

    }
})
```


#c 注册并引用svg组件
使用 webpack 中的require.context来批量引入svg文件,  
并将svg组件注册为vue组件, 这样我们就可以在项目中使用svg了  
为了能够同时使用网络上的svg图标, 设置组件参数`svgHref`属性,  
用于直接引入网络上的svg图标  

#e 注册与组件
这里我们将svg文件统一放置于`src/assets/svg`目录中, `@`为`src`的别名(alias)
iconIndex.js
```js
import Vue from 'vue'
import SvgIcon from './iconSvg' // svg组件

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

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/svg', false, /\.svg$/)
requireAll(req)
```
svg-icon.vue
```vue
<template>
  <svg class="svg-icon" aria-hidden="true">
    <image v-if="svgHref" :xlink:href="svgHref" />

    <use v-else :xlink:href="_iconName"/>
<!--    使用 链接 加载 svg-->
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      default: '',
    },
    svgHref: {
      type: String,
      default: '',
    },
  },
  computed: {
    _iconName () {
      return `#icon-${this.iconClass}`
    },
  },
}
</script>

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

#e 使用组件
在对应的svg目录放置好svg文件后, 在需要使用的地方直接调用组件即可  
例如放置 user.svg, 在使用的时候只需要使用如下代码即可,  
`icon-class`属性填写svg文件的文件名即可
```vue
<template>
  <div class="div">
    <svg-icon icon-class="user" />
  </div>
</template>
```