环境
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)
app.component(SvgIcon.name,SvgIcon)
# 第五步 直接引用组件
<template>
<svg-icon name="bug" color="green" size="50"></svg-icon>
</template>
注
1. 文件目录结构
2. e.d.ts文件内容
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>
效果