vue3+ts+uniapp+vite引入svg图标

在Vue3 + TypeScript + UniApp（原Dcloud）项目中，结合Vite构建工具，引入SVG图标通常分为以下几个步骤：

1. 安装依赖：首先需要安装`vue-svg-loader` 和 `@types/vue-svg-icon`，这两个库分别用于处理SVG文件并在Vue组件中使用。你可以通过npm或yarn来安装它们：

   npm install vue-svg-loader @types/vue-svg-icon --save-dev

2. 配置loader：在`.vitepress/vite.config.ts` 或 `.vite/config.js` 文件中，添加SVG加载器配置到模块解析规则中。例如：

   import { defineConfig } from 'vite';
   import vueSvgLoader from 'vue-svg-loader';

   export default defineConfig({
     build: {
       // ... 其他配置项
       loaderOptions: {
         svg: {
           // 使用 vue-svg-loader 解析 SVG 文件
           transform: vueSvgLoader(),
         },
       },
     },
   });

3. 使用SVG：在Vue组件中，可以直接将SVG内容插入到`<template>`标签内，或者作为`<img>`元素src属性的值。如果要动态引用SVG，可以创建一个包含路径的对象，并在模板中通过`<template v-bind:src="iconPath">`引用它：

   <template>
     <div :class="{'my-svg': true}">
       <img v-if="!isIconString" :src="iconPath" alt="SVG Icon">
       <template v-else>
         <svg :viewBox="icon.viewbox" :width="icon.width" :height="icon.height">
           <use :href="#{{ icon.id }}"></use>
         </svg>
       </template>
     </div>
   </template>

   <script setup lang="ts">
     const icon = {
       id: "my-svg-icon",
       viewBox: "0 0 24 24",
       width: 24,
       height: 24,
       pathData: `<path d="M..."></path>`, // 你的SVG数据
     };
     const isIconString = false; // 根据需求设置为布尔值

     // 在data()或setup()中获取并传递给模板
     const iconPath = isIconString ? "#" + icon.id : icon.pathData;
   </script>