vue使用svg图片

<template>
  <div>
    <!-- 使用内联 SVG -->
    <svg-icon class="icon" icon-class="example"></svg-icon>

    <!-- 使用 img 标签引入 SVG -->
    <img src="@/assets/icons/example.svg" alt="Example Icon">

    <!-- 使用 background-image 引入 SVG -->
    <div class="svg-background"></div>
  </div>
</template>

<script>
export default {
  name: 'SvgUsage'
}
</script>

<style scoped>
.icon {
  width: 24px;
  height: 24px;
}

.svg-background {
  width: 100px;
  height: 100px;
  background-image: url('@/assets/icons/example.svg');
  background-size: cover;
}
</style>

<!-- 解释说明:
1. 内联 SVG：通过自定义的 `<svg-icon>` 组件来使用 SVG 图标，通常需要配合一个图标管理工具（如 svg-sprite-loader）。
2. 使用 `img` 标签：直接在 HTML 中使用 `img` 标签引入 SVG 文件，简单直接，但无法像内联 SVG 那样修改其中的颜色等属性。
3. 使用 `background-image`：通过 CSS 的 `background-image` 属性引入 SVG 文件，适用于需要作为背景图的情况。 -->