在vite和vue3.3+环境下svg-icon组件引入

环境

	vite 不用多说和vue3搭配太香了
	vue3.3+ 为什么3.3呢，因为在3.3之前想给<script setup>添加name属性算一件恶心的事，虽然可以通过新建script标签实现，但还是恶心，但是在3.3之后，vue添加了一个defineOptions方法可以直接在内部添加name属性
	svg-icon:为什么用这个呢，因为大家都用组件式了，没用类名形式了，这是个趋势流行

为什么要自己写: 因为其他插件基本都没有 清除 svg文件的 fill属性，导致在给color的时候没有效果,还有就是 其他插件并没有提供一个封装好的svg-icon.vue组件,需要自己写，我直接在下载插件的时候附带一个组件，方便调用。

操作

# 第一步 引入@chennian/svg-icon-plugin
pnpm i @chennian/svg-icon-plugin -D

# 第二步 用一个文件夹存放svg文件

# 第三步 vite.config.ts中配置svg文件夹路径
import { svgIconBuilder } from '@chennian/svg-icon-plugin'
export default defineConfig({
  plugins: [vue(),svgIconBuilder({
    svgDirPath:'./src/svgs'
  })],
})

# 第四步 main中引入注册svg-icon.vue组件
在这个包里，已经配好了一个组件的vue文件,可以直接用，当然你也可以自己写
import SvgIcon from '@chennian/svg-icon-plugin/svg-icon.vue'
const app=createApp(App)
// 如果是3.3以下的SvgIcon.name试着换成 字符串'SvgIcon'
app.component(SvgIcon.name,SvgIcon)

# 第五步 直接引用组件
<template>
// name就是文件名 color颜色 size 大小
  <svg-icon name="bug" color="green" size="50"></svg-icon>
</template>

注

1. 文件目录结构

2. e.d.ts文件内容

// 声明vue文件
declare module "*.vue" {
    import type { DefineComponent } from "vue"; 
    const vueComponent: DefineComponent<{}, {}, any>; 
    export default vueComponent;
 }

这个需要配合tsconfig.json,在file中加入e.d.ts文件路径,识别vue文件
"include": ["e.d.ts","src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

3. 图标样式也可以通过.icon-name 来实现控制

<template>
<svg-icon name="bug" color="green"></svg-icon>
</template>

<style scoped>
.icon-bug{
    font-size: 50px;
}
</style>

效果