vite-svg-icon使用介绍

可以方便的在vue2和vue3中使用.svg文件

1、先进行安转引入

1yarn add vite-svg-icon -D

2、在vite.config.js中配置

1import { svgBuilder } from "vite-svg-icon";
2export default defineConfig({
3  build: {
4    target: "es2015",
5  },
6
7  plugins: [
8    svgBuilder("./aeeset/svg/"), // 这个是svg的文件目录
9  ],
10});
11

在vue3.0中使用

1、先定义组件 svgIcon.vue

1<template>
2  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color, fontSize: size + 'px' }">
3    <use :xlink:href="iconName" />
4  </svg>
5</template>
6
7<script setup>
8  import { computed } from 'vue';
9
10  const props = defineProps({
11    name: {
12      type: String,
13      required: true,
14    },
15    color: {
16      type: String,
17      default: '',
18    },
19    size: {
20      type: String,
21      default: '14',
22    },
23  });
24
25  const iconName = computed(() => `#icon-${props.name}`);
26  const svgClass = computed(() => {
27    if (props.name) {
28      return `svg-icon icon-${props.name}`;
29    }
30  });
31</script>
32
33<style lang="scss">
34  .svg-icon {
35    width: 1em;
36    height: 1em;
37    fill: currentColor;
38    vertical-align: middle;
39  }
40</style>

2、在main.js中进行全局注册

1import svgIcon from './components/svgIcon.vue';
2const app = createApp(App);
3app.component('svg-icon', svgIcon);

3、在页面中使用 name就是svg文件的名字

1 <svg-icon name="qiye" size="30" color="black"></svg-icon>

vue2.0中引用

1、定义组件 svgIcon.vue

1<template>
2  <svg
3    :class="svgClass"
4    v-bind="$attrs"
5    :style="{ color: color, fontSize: size + 'px' }"
6  >
7    <use :xlink:href="iconName" />
8  </svg>
9</template>
10
11<script>
12export default {
13  props: {
14    name: {
15      type: String,
16      required: true,
17    },
18    color: {
19      type: String,
20      default: "",
21    },
22    size: {
23      type: String,
24      default: "14",
25    },
26  },
27  computed: {
28    iconName() {
29      return `#icon-${this.name}`;
30    },
31    svgClass() {
32      if (this.name) {
33        return `svg-icon icon-${this.name}`;
34      }
35      return "svg-icon";
36    },
37  },
38};
39</script>
40
41<style lang="scss">
42.svg-icon {
43  width: 1em;
44  height: 1em;
45  fill: currentColor;
46  vertical-align: middle;
47}
48</style>

2、全局注册组件

1Vue.component('svg-icon', svgIcon)

使用方式和vue3.0的一致

常见问题

配置color属性之后 svg图标没有颜色改变

找到svg的源文件，将其中的 fill 属性删除，就可以改变颜色