vue3 使用 svg矢量图

在Vue3中使用SVG矢量图，你可以按照以下步骤进行操作：

1. 在`main.js`或`main.ts`文件中，引入`vite-plugin-svg-icons`插件并注册全局的SVG图标组件。你可以使用以下代码：

import 'vite-plugin-svg-icons/register';
import svgIcon from './components/SvgIcon.vue';
app.component('svg-icon', svgIcon);

这样就可以在整个应用程序中使用`<svg-icon>`组件了。\[1\]

2. 在`src/components`目录下创建一个名为`SvgIcon.vue`的组件文件，并添加以下代码：

<template>
  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return `svg-icon ${this.className}`;
      }
      return 'svg-icon';
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 10em;
  height: 10em;
  fill: currentColor;
  overflow: hidden;
}
</style>

这个组件将接受一个`iconClass`属性，用于指定要显示的SVG图标的类名。你可以在模板中使用`<svg-icon>`标签，并通过`icon-class`属性传递类名，如下所示：

<svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon>

这样就可以在Vue3 + Vite中使用SVG矢量图了。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [vue中使用svg矢量图](https://blog.csdn.net/qq_44376306/article/details/123497667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]