Vue3+Vite+Ts 实现封装引入svg图标

Hello，大家好啊！我是聪明的墨菲特 (o.O)? ！今天和大家分享使用Vue3+Vite+Ts 实现封装后动态引入svg图标，不多说我们直接开整！

1. 安装依赖插件 vite-plugin-svg-icons

pnpm i vite-plugin-svg-icons -D

2. 安装 fast-glob

pnpm i fast-glob

 3. 配置 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; //引入svg需要用到的插件
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({//svg配置
      iconDirs: [path.resolve(process.cwd(),'src/assets/icons')],//导入路径为'src/assets/icons'
      symbolId: 'icon-[dir]-[name]',//名称格式为‘icon-name’格式
    })
  ],
  
  resolve: {
    alias: {
      "@": path.resolve("./src")//相对路径别名配置，使用@代替Src
    }
  }
})

 4. 引入svg图标

复制svg图标代码存放至che.svg文件，目录结构如下图所示

<svg t="1702018102416" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="785" width="64" height="64"><path d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z" p-id="786"></path></svg>

 5. 在main.ts入口引入配置

//svg插件在主文件内需要的配置代码
import 'virtual:svg-icons-register'

 6.子组件内封装

<template>
    <svg :style="{width, height}">
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>
  
<script setup lang="ts">
defineProps({
    //前缀
    prefix: {
        type: String,
        default: "#icon-"
    },
    //图标名称
    name: String,
    //颜色
    color: {
        type: String,
        default: ""
    },
    //宽高，不传入默认为30px
    width: {
        type: String,
        default: "30px"
    },
    height: {
        type: String,
        default: "30px"
    },
})
</script>
  
<style scoped></style>
  

7.父组件内引用

需要传入的参数根据子组件的定义传入，此处传入图后缀名、颜色、宽高。

<template>
  <!-- 传入图后缀名、颜色、宽高 -->
  <SvgIcon name="che" color="blue" width="100px" height="100px"></SvgIcon>
</template>

<script setup lang="ts">
  import SvgIcon from '@/components/svgIcon/index.vue'
</script>

<style scoped></style>

 8.效果

最后，后续项目需要添加多少图标，都可以直接引入使用，很方便哒！（o.O?）