Vue3 中如何使用 SVG 图标

在 Vue3 项目开发中，合理使用 SVG 图标能够极大提升用户界面的美观度与交互性。以下将详细介绍在 Vue3 里使用 SVG 图标的几种常见方法。

首先是直接引入 SVG 标签。在模板中，可以直接插入 SVG 代码。例如：

<template>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>
</template>

<script setup>
// 无需额外逻辑
</script>

这种方式简单直接，适合少量且无需复杂交互的 SVG 图标。但如果项目中有大量 SVG 图标，代码会变得冗长，不利于维护。

为了更好地管理 SVG 图标，可以将其封装成组件。创建一个专门的 SVG 组件，比如 SvgIcon.vue：

<template>
  <svg :class="iconClass" :style="iconStyle" :fill="fillColor" :viewBox="viewBox">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  iconClass: {
    type: String,
    default: ''
  },
  iconStyle: {
    type: Object,
    default: () => ({})
  },
  fillColor: {
    type: String,
    default: 'currentColor'
  },
  viewBox: {
    type: String,
    default: '0 0 24 24'
  }
});

const iconUrl = computed(() => `#${props.iconName}`);
</script>

在使用时，只需在其他组件中引入 SvgIcon.vue 并传入相应参数：

<template>
  <SvgIcon iconName="user" iconClass="icon-size" :iconStyle="{ color: 'red' }" />
</template>

<script setup>
import SvgIcon from './SvgIcon.vue';
</script>

这样做不仅使代码结构更清晰，而且方便对 SVG 图标进行统一管理和样式定制。

另外，还可以借助插件来处理 SVG 图标。例如 vite-plugin-svg-icons，它能与 Vite 集成，实现更便捷的 SVG 图标使用方式。首先安装插件，然后在 vite.config.ts 中进行配置：

import { defineConfig } from 'vite';
import svgIconsPlugin from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    svgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    })
  ]
});

在组件中使用时，通过特定语法引入 SVG 图标。

通过上述方法，开发者可以根据项目需求灵活选择在 Vue3 中使用 SVG 图标，为项目打造更具吸引力的界面。