vue中使用svg矢量图

svg的好处

• 矢量性（无论图片放多大，都不会出现锯齿状模糊）
• 利于seo

vue2中使用svg

1.安装依赖

npm install svg-sprite-loader -D

2.配置vue.config.js

 const resolve = dir => path.join(__dirname, dir);
    // 配置svg
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/sprites'))
      .end();
    config.module
      .rule('sprites')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/sprites'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();

3.在src/components下新建svgIcon组件

<template>
  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners">
    <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: 10em;
    height: 10em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

4.在src/plugins下新建 svg-icon.js文件

import Vue from 'vue';
import SvgIcon from '@/components/svgIcon.vue';// svg component

// register globally
Vue.component('svg-icon', SvgIcon);

const req = require.context('../assets/icons/sprites', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

5.在main.js 中引入

import './plugins/svg-icon';

6.下载svg图片将svg图片放在assets/sprites/下面

7. 在vue文件中使用svg图片(可以通过font-size,color来设置svg图标颜色和大小，设置color时需要将svg文件中的path下面的fill=“#xxx”去除即可)

<svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon>

在 vue3 + vite 中使用

1.安装依赖

yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D

2.配置插件 vite.config.js / vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons';
const { resolve } = require('path')
 
export default defineConfig({
  plugins: [
    vue(),
    viteSvgIcons({
      // 配置路径在你的src里的svg存放文件
      iconDirs: [resolve(process.cwd(), 'src/assets/sprites')],
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})

3.存放svg文件路径 /src/assets/sprites

src/assets/sprites

- icon1.svg

- icon2.svg

- icon3.svg

4.SvgIcon组件实现

template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>
 
<script lang="ts">
import {computed, defineComponent} from 'vue'
export default defineComponent({
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#889aa4',
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      }),
    }
  },
})
</script>
 
<style scope>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

4.在main.js / main.ts 加入否则报错

import 'vite-plugin-svg-icons/register';
// 需要全局引入再添加
import svgIcon from './components/SvgIcon.vue' // 全局svg图标组件
app.component('svg-icon', svgIcon)

5.在vue 文件中使用

<template>
  <div>
     <svg-icon icon-class="icon1" />
  </div>
</template>
 
<script>
  import { defineComponent, computed } from 'vue';
 
  import SvgIcon from './components/SvgIcon.vue';
  export default defineComponent({
    name: 'App',
    components: { SvgIcon },
  });
</script>