vue3使用svg图标 多种方式

在Vue 3中，可以使用多种方式来使用SVG图标。以下是至少5种常见的方式：

1. 使用<svg>标签：

可以直接在Vue模板中使用<svg>标签来插入SVG图标代码。将SVG图标代码复制到模板中，并根据需要添加样式和属性。

<template>
  <div>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" />
    </svg>
  </div>
</template>

<style>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

2. 使用Vue组件：

可以将SVG图标封装为Vue组件，以便在应用程序中多次使用。创建一个新的Vue组件，并在模板中使用<svg>标签来插入SVG图标代码。

<template>
  <div>
    <Icon />
  </div>
</template>

<script>
import Icon from './Icon.vue';

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

<!-- Icon.vue -->
<template>
  <svg class="icon" viewBox="0 0 24 24">
    <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" />
  </svg>
</template>

<style>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

3. 使用Vue插件：

可以使用Vue插件来管理和使用SVG图标。一些常见的Vue插件，如vue-svg-icon和vue-fontawesome，提供了方便的方式来使用SVG图标。

npm install vue-svg-icon

import Vue from 'vue';
import VueSvgIcon from 'vue-svg-icon';

Vue.use(VueSvgIcon);

<template>
  <div>
    <svg-icon name="icon-name" />
  </div>
</template>

4. 使用CSS背景图：

可以将SVG图标作为CSS背景图使用，并通过类名来引用。

<template>
  <div class="icon icon-name"></div>
</template>

<style>
.icon {
  width: 24px;
  height: 24px;
  background-image: url(path/to/icon.svg);
  background-size: cover;
}

.icon-name {
  background-position: center;
}
</style>

5. 使用第三方图标库：

可以使用第三方图标库，如Font Awesome或Material Icons，它们提供了大量的矢量图标供选择，并通过CSS类名来使用。

npm install @fortawesome/fontawesome-free

import { createApp } from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faCoffee);

const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon);
app.mount('#app');

<template>
  <div>
    <font-awesome-icon icon="coffee" />
  </div>
</template>

以上是Vue 3中使用SVG图标的至少5种常见方式。可以根据具体需求选择最适合的方式来使用SVG图标。

以下是五种使用SVG图标的方法的使用场景和优缺点：

1. 使用<svg>标签：

   • 使用场景：适用于简单的SVG图标，可以直接在模板中插入SVG代码，无需额外的组件或插件。
   • 优点：简单直接，无需额外配置和依赖。
   • 缺点：不利于复用，当需要在多个地方使用相同的SVG图标时，需要多次复制SVG代码。

2. 使用Vue组件：

   • 使用场景：适用于需要在应用程序中多次使用相同的SVG图标。
   • 优点：方便复用，可以将SVG图标封装为Vue组件，提高可维护性。
   • 缺点：需要创建和维护多个Vue组件，增加了一定的开发成本。

3. 使用Vue插件：

   • 使用场景：适用于需要管理和使用大量SVG图标的情况。
   • 优点：提供了方便的管理和使用SVG图标的方式，可以通过名称来引用SVG图标，减少了重复的代码。
   • 缺点：需要额外的插件依赖，增加了项目的复杂性。

4. 使用CSS背景图：

   • 使用场景：适用于需要在元素背景中使用SVG图标的情况。
   • 优点：可以通过类名来引用SVG图标，方便样式控制。
   • 缺点：不适用于需要在SVG图标上添加交互或动画的情况，无法直接操作SVG图标的内部元素。

5. 使用第三方图标库：

   • 使用场景：适用于需要使用大量常用图标的情况。
   • 优点：提供了大量的矢量图标供选择，可以直接通过CSS类名来使用。
   • 缺点：需要额外的依赖库，增加了项目的复杂性，可能会增加应用程序的体积。

根据具体需求和项目情况，可以选择最适合的SVG图标使用方法。如果只需要简单的SVG图标，可以直接使用<svg>标签；如果需要在多个地方复用相同的SVG图标，可以使用Vue组件；如果需要管理大量SVG图标，可以使用Vue插件；如果需要在背景中使用SVG图标，可以使用CSS背景图；如果需要使用常用图标，可以使用第三方图标库。