vue使用svg

<template>
  <div>
    <!-- 使用内联 SVG -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-example"></use>
    </svg>

    <!-- 使用组件方式引入 SVG -->
    <MySvgIcon icon-class="example" />
  </div>
</template>

<script>
import MySvgIcon from './components/MySvgIcon.vue';

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

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

解释说明：

1. 内联 SVG：

   • 在模板中直接使用 <svg> 标签，并通过 <use> 标签引用定义好的 SVG 图标。xlink:href 属性用于指定要使用的图标 ID。
   • 这种方式适合少量的 SVG 图标，且可以直接在 HTML 中嵌入。

2. 组件方式引入 SVG：

   • 将 SVG 图标封装成一个 Vue 组件（如 MySvgIcon），并通过 props 传递图标的名称或路径。
   • 这种方式适合项目中有大量 SVG 图标时，便于管理和复用。

3. 样式：

   • .icon 类设置了 SVG 图标的默认样式，包括宽度、高度、垂直对齐方式等。
   • fill: currentColor 使得 SVG 图标的颜色与文本颜色一致，方便统一管理颜色。

4. 注册组件：

   • 在 <script> 部分，通过 import 引入 MySvgIcon 组件，并在 components 选项中注册它，以便在模板中使用。

如果你需要进一步了解如何定义和引入 SVG 图标，请提供更多具体需求。