vue3 + vite + ts 封装 SvgIcon组件

环境 vite + vue3 + ts

"vue": "^3.3.4",
"vite": "^4.4.0",
"typescript": "^5.0.2",

# 需要下载的依赖
"vite-plugin-svg-icons": "^2.0.1",

不同版本可能存在一定差异, 这篇文章不可能对应所有版本, 但具有一定的参考性,

1. 安装依赖

pnpn install vite-plugin-svg-icons -D

2. 配置vite.config.ts 文件

//引入依赖
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
//启用插件
createSvgIconsPlugin({
  // 指定图标文件夹，绝对路径（NODE代码）
  iconDirs: [path.resolve(process.cwd(), "src/svgs")],
})

3. 创建文件夹

在src文件下新建一个文件夹, 里面存放svg图标

4. 封装SvgIcon组件

<template>
    <svg
        :class="className"
        class="svg-icon"
        :style="iconStyle"
        aria-hidden="true"
    >
      <use :xlink:href="iconName">use>
    svg>
template>

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

const props = defineProps({
  // 类名
  className: {
    type: String, // 可以传入类名
    default: '',
  },
  iconStyle: { // icon的样式, 是一个对象
    type: Object,
    default: ()=>({})
  },
  name: { //应用的图标名称
    type: String,
    default: ''
  }
})

const iconName = computed(() => {
  return `#icon-${props.name}`
})

script>

<style lang="scss" scoped>
  svg {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; // 填充为当前颜色
    overflow: hidden;
  }
style>

路径的话, 找一个方便管理的地方 比如 src/components 文件下

5. 全局引入

在main.ts中对组件进行引入

// 引入Svg组件
import "virtual:svg-icons-register";
import SvgIcon from "./components/SvgIcon.vue";


const app = createApp(App);

// ....
// 全局注册
app.component('SvgIcon',SvgIcon)

// ....
app.mount('#app')

6.使用

<SvgIcon 
	name="[这里是的名称,按照模板的写法文件的名称即可]"
	:iconStyle="{'这里是对象形式的样式'}"
	:iconClass="这里是类名"
>SvgIcon>

备注: SvgIcon组件的, 按照自己的喜好与需求去封装,
还有很多使用其他插件的教程, 大家根据自己的需求去下载使用,
但对于每篇教程都要保留一定的思考性, 如果能找到对应的版本就很棒了,
没有得话就找一下相似版本的教程作为参考,

文章最后放上一张’二次元’

本文可以白嫖!!!