Vue3 + Vite 中如何使用 SVG 图标

在现代前端开发中，SVG（可缩放矢量图形）图标因其轻量、可缩放、易于定制等优点，逐渐成为图标使用的首选方案。Vue3 和 Vite 作为当前流行的前端技术栈，提供了高效、灵活的开发体验。本文将详细介绍如何在 Vue3 + Vite 项目中使用 SVG 图标，涵盖从基础使用到高级定制的完整流程。

1. 为什么选择 SVG 图标？

在开始之前，我们先简单了解一下为什么 SVG 图标在前端开发中如此受欢迎：

• 矢量图形：SVG 是矢量图形，可以无限缩放而不失真，适合各种分辨率的设备。
• 轻量：SVG 文件通常比位图（如 PNG、JPEG）更小，加载速度更快。
• 可定制：SVG 可以通过 CSS 或 JavaScript 动态修改颜色、大小等属性。
• 易于动画：SVG 支持 CSS 和 JavaScript 动画，适合创建复杂的交互效果。

2. 在 Vue3 + Vite 项目中引入 SVG 图标

2.1 直接使用 <img> 标签

最简单的方式是直接将 SVG 文件作为图片引入。假设我们有一个 icon.svg 文件，可以这样使用：

<template>
  <img src="@/assets/icon.svg" alt="Icon" />
</template>

这种方式简单直接，但无法通过 CSS 或 JavaScript 动态修改 SVG 的属性。

2.2 使用 vite-svg-loader 插件

为了更灵活地使用 SVG 图标，我们可以借助 vite-svg-loader 插件。这个插件可以将 SVG 文件作为 Vue 组件导入，从而允许我们在 Vue 组件中直接使用 SVG。

2.2.1 安装 vite-svg-loader

首先，安装 vite-svg-loader：

npm install vite-svg-loader --save-dev

2.2.2 配置 vite.config.js

在 vite.config.js 中配置 vite-svg-loader：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [vue(), svgLoader()],
});

2.2.3 使用 SVG 组件

配置完成后，我们可以将 SVG 文件作为 Vue 组件导入并使用：

<template>
  <Icon />
</template>

<script>
import Icon from '@/assets/icon.svg';

export default {
  components: {
    Icon,
  },
};
</script>

这种方式允许我们像使用普通 Vue 组件一样使用 SVG 图标，并且可以通过 props 或 class 动态修改 SVG 的属性。

2.3 使用 unplugin-icons 插件

unplugin-icons 是一个功能强大的插件，支持从多个图标库（如 Material Design Icons、FontAwesome 等）中自动导入 SVG 图标，并将其转换为 Vue 组件。

2.3.1 安装 unplugin-icons

首先，安装 unplugin-icons 及其相关依赖：

npm install unplugin-icons unplugin-vue-components --save-dev

2.3.2 配置 vite.config.js

在 vite.config.js 中配置 unplugin-icons：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Icons from 'unplugin-icons/vite';
import Components from 'unplugin-vue-components/vite';
import IconsResolver from 'unplugin-icons/resolver';

export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: 'vue3',
    }),
    Components({
      resolvers: [IconsResolver()],
    }),
  ],
});

2.3.3 使用图标

配置完成后，我们可以直接从图标库中导入图标并使用：

<template>
  <IconMaterialDesign:home />
</template>

<script>
import IconMaterialDesignHome from '~icons/material-design/home';

export default {
  components: {
    IconMaterialDesignHome,
  },
};
</script>

这种方式非常适合需要大量使用图标库的项目，可以极大地提高开发效率。

3. 高级定制

3.1 动态修改 SVG 属性

通过将 SVG 作为 Vue 组件导入，我们可以轻松地动态修改 SVG 的属性。例如，我们可以通过 props 传递颜色和大小：

<template>
  <Icon :color="iconColor" :size="iconSize" />
</template>

<script>
import Icon from '@/assets/icon.svg';

export default {
  components: {
    Icon,
  },
  data() {
    return {
      iconColor: '#ff0000',
      iconSize: '24px',
    };
  },
};
</script>

<style scoped>
.icon {
  fill: v-bind(iconColor);
  width: v-bind(iconSize);
  height: v-bind(iconSize);
}
</style>

3.2 使用 CSS 动画

SVG 图标支持 CSS 动画，我们可以通过 @keyframes 创建复杂的动画效果。例如，创建一个旋转动画：

<template>
  <Icon class="spin" />
</template>

<script>
import Icon from '@/assets/icon.svg';

export default {
  components: {
    Icon,
  },
};
</script>

<style scoped>
.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

3.3 使用 JavaScript 控制 SVG

通过 JavaScript，我们可以更灵活地控制 SVG 图标。例如，我们可以通过 ref 获取 SVG 元素并动态修改其属性：

<template>
  <Icon ref="icon" />
  <button @click="changeColor">Change Color</button>
</template>

<script>
import Icon from '@/assets/icon.svg';

export default {
  components: {
    Icon,
  },
  methods: {
    changeColor() {
      const icon = this.$refs.icon;
      icon.style.fill = '#00ff00';
    },
  },
};
</script>

4. 总结

在 Vue3 + Vite 项目中使用 SVG 图标，不仅能够提升应用的性能和用户体验，还能通过灵活的定制和动画效果增强交互性。通过 vite-svg-loader 和 unplugin-icons 等插件，我们可以轻松地将 SVG 图标集成到项目中，并根据需要进行高级定制。

无论是简单的静态图标，还是复杂的动态效果，SVG 图标都能满足我们的需求。希望本文能帮助你在 Vue3 + Vite 项目中更好地使用 SVG 图标，提升开发效率和用户体验。