svg使用封装-vue

我们在项目中经常会使用到svg，这里对svg进行封装，以方便后续的使用。

1.安装svg插件

npm i vite-plugin-svg-icons

2.在vite.config.ts中引入，用来指定svg存放位置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";

const plugins = [
  createSvgIconsPlugin({
    iconDirs: [resolve(process.cwd(), 'src/assets/svgs')]
  })
];

　　这里指定的svg存放位置为src下的assets下的svgs文件夹。

3.封装svg组件

<template>
  <svg >
    <use :xlink:href="symbolId" :fill="color"/>
  </svg>
</template>

<script setup lang="ts">
import {computed} from 'vue';

/***
 * prefix svg前置图标
 * iconClass svg类名 必传
 * color 修改svg颜⾊
 */
const props = defineProps({
  prefix: {type: String, default: 'icon',},
  iconClass: {type: String, required: true,},
  color: {type: String, default: '#fff'}
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
</style>

4.在main.ts中进行注册，方便全局使用

import "virtual:svg-icons-register"
//svg组件
import SvgIcon from './components/svg/index.vue'

//注册到全局
app.component('svg-icon', SvgIcon)

　　这一步实际上在我们使用业务的时候会很繁琐，我们需要针对不同的组件进行各种全局注册，这个在后面我将进行自动化封装来解决这个问题。

5.使用

　　assets/svgs下文件

　　---svg1.svg

　　---aa/svg2.svg

　　组件中使用

<svg-icon iconClass="svg1"></svg-icon> 

<svg-icon iconClass="aa-svg2"></svg-icon> 

　　上述例子，主要是为了说明，可以使用文件夹形式存放，只要在指定文件夹下，建立多级目录也是不影响使用的。