vue3 中 svg 的使用方法

在 Vue 3 项目开发中，SVG（可缩放矢量图形）因其在各种场景下出色的表现，被广泛应用。下面为大家详细介绍其使用方法。

首先是直接引入 SVG 图片。在 Vue 组件的模板中，可使用 <img> 标签来引入 SVG 文件。例如：<img src="@/assets/logo.svg" alt="logo">，这里通过相对路径找到项目中的 SVG 文件，将其展示在页面上。这种方式简单直接，适合展示一些静态的、不需要交互的 SVG 图形。

若想对 SVG 进行更多样式和交互操作，可将 SVG 代码直接嵌入到模板中。把 SVG 的 XML 代码复制到 Vue 组件的模板里，然后就能像操作普通 HTML 元素一样对其进行样式设置。比如：

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

在上述代码中，我们创建了一个简单的蓝色圆形 SVG 图形，通过修改 width、height、viewBox 以及图形元素（如 <circle>）的属性，能实现各种不同的 SVG 图形效果。

还可以将 SVG 封装成组件。在 Vue 项目中新建一个 SVG 组件，例如 SvgIcon.vue。在组件中接收 SVG 的相关属性，然后渲染 SVG 图形。代码示例如下：

<template>
  <svg :width="width" :height="height" viewBox="0 0 24 24">
    <path :d="path" fill="currentColor" />
  </svg>
</template>

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

const props = defineProps({
  width: { type: String, default: '24' },
  height: { type: String, default: '24' },
  path: { type: String, required: true }
});
</script>

使用时，在其他组件中引入 SvgIcon.vue 组件，并传入相应属性：

<template>
  <SvgIcon width="30" height="30" path="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10 -4.48 10 -10S17.52 2 12 2zm0 18c-4.41 0 -8 -3.59 -8 -8s3.59 -8 8 -8 8 3.59 8 8 -3.59 8 -8 8z" />
</template>

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

通过上述几种方法，开发者可以在 Vue 3 项目中灵活运用 SVG，为项目增添丰富多样的图形元素，提升用户体验。