vue 使用svg

<template>
  <div>
    <!-- 使用内联 SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      <polyline points="9 22 9 12 15 12 15 22"></polyline>
    </svg>

    <!-- 使用 <component> 动态加载 SVG -->
    <component :is="iconComponent"></component>

    <!-- 使用外部 SVG 文件 -->
    <img src="./assets/icon.svg" alt="External SVG">
  </div>
</template>

<script>
import HomeIcon from './assets/home-icon.svg';

export default {
  data() {
    return {
      iconComponent: HomeIcon,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
svg {
  width: 24px;
  height: 24px;
}
</style>

解释说明

1. 内联 SVG:

   • 直接在模板中使用 <svg> 标签来嵌入 SVG 图形。这种方式适合简单的图标或图形。
   • 优点是可以直接操作和样式化 SVG 元素。

2. 动态加载 SVG:

   • 使用 Vue 的 <component> 组件结合 :is 属性动态加载 SVG 文件。
   • 这种方式适合管理多个 SVG 图标，可以通过组件的形式进行复用和管理。

3. 外部 SVG 文件:

   • 使用 <img> 标签引入外部的 SVG 文件。
   • 适合较大的 SVG 文件或需要缓存的情况。

通过这三种方式，你可以在 Vue 项目中灵活地使用 SVG 图标和图形。