Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件

# 1、安装依赖

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

1
2
3

# 2、安装glob

不安装会提示Error: Cannot find module 'fast-glob'

yarn add fast-glob -D
# 或
npm install fast-glob -D

1
2
3

# 3、配置vite.config.ts

导出名为createSvgIconsPlugin并加大括号，不然会提示TypeError: (0 , import_vite_plugin_svg_icons.default) is not a function

import { defineConfig } from 'vite'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 指定要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/svg')],
      // 执行icon name的格式
      symbolId: 'icon-[name]',
    })
  ]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4、svg组件封装

组件路径 src/components/SvgIcon.vue

<template>
  <svg
    :class="svgClass"
    v-bind="$attrs"
    :style="{ color: color,   width: size + 'px',  height: size + 'px'  }"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ""
  },
  size: {
    type: Number,
    default: 12
  }
});
const iconName = computed(() => `#${props.name}`);
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`;
  return "svg-icon";
});
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 5、在main.js注册脚本

// 引入注册脚本
import 'virtual:svg-icons-register'
// 引入组件
import SvgIcon from '@/components/SvgIcon.vue'

// 全局组件挂载
app.component('SvgIcon', SvgIcon)

1
2
3
4
5
6
7

# 6、引用自定义Icon组件

<template>
	 <Icon name = "icon-alipay" />
	 <Icon name = "icon-qq" />
	 <Icon name = "icon-wechat" />
</template>

1
2
3
4
5

#Vite #Vue

上次更新: 2024/01/30, 00:35:17

← vite 打包时内存溢出处理方案 Vite项目构建优化之移除console.log和其他生产日志→