vue3 js 配置svg-icon

Vue3 中配置 SVG 图标通常涉及到在项目中引入并使用 Vue-SvgIcon 或其他类似的库来轻松地管理 SVG 资源。以下是简单的步骤：

1. **安装依赖**：
使用 npm 或 yarn 安装 `vue-svg-icon` 库：

   npm install vue-svg-icon
   # 或者
   yarn add vue-svg-icon

2. **注册插件**：
在 `main.js` 或 `vite.config.js`（如果是 Vite 项目）里，注册 `vue-svg-icon` 插件：

   import { createApp } from 'vue'
   import IconsPlugin from 'vue-svg-icon'

   const app = createApp(App)
   app.use(IconsPlugin)

3. **创建SVG图标**：
创建一个 `.svg` 文件，例如 `my-icon.svg`，保存在 `src/icons` 目录下。然后使用 `<template>` 标签在组件内引用它：

   <template>
     <svg :src="require('@/icons/my-icon.svg')" class="icon" />
   </template>

4. **在组件中使用**：
在需要的地方导入并使用你的 SVG 图标：

   export default {
     components: {
       MyIcon: {
         functional: true,
         render(h, { props }) {
           return h('svg', {
             ...props,
             href: require('@/icons/my-icon.svg'),
             slot: 'icon',
             staticClass: 'icon-my-icon'
           });
         }
       }
     }
   }

现在你可以通过 `<MyIcon />` 渲染图标，并根据需要调整样式。