1、前言
自己在写项目的时候,想着既可以使用本地icon字体图标又可以使用线上UI的字体图标库。由于目前的字体图标库大部分都是用svg来做的,所以用到了这个方法。
2、本地icon
2.1 下载 vite-plugin-svg-icons插件
pnpm i vite-plugin-svg-icons
2.2 使用vite-plugin-svg-icons插件
//vite.config.ts
import { defineConfig } from 'vite'
import {createSvgIconsPlugin} from "vite-plugin-svg-icons"
import path from "path";
export default defineConfig({
plugins: [
createSvgIconsPlugin({
iconDirs:[path.resolve(process.cwd(),'src/assets/icons')],//svg-icon 文件夹路径
symbolId:'icon-[dir]-[name]'
})
],
})
//mian.ts
import "virtual:svg-icons-register";
2.3 封装svg-icon组件
//svg-icon
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" :fill="props.color" />
</svg>
</template>
<script setup lang="ts">
type propsType = {
iconClass: string;
className: string;
color?: string;
}
const props = withDefaults(defineProps<propsType>(), {
// 图标名称
iconClass: '',
// 样式类名
className: '',
// 颜色
color: '',
})
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
}
return 'svg-icon'
})
const iconName = computed(() => {
return `#icon-${props.iconClass}`
})
</script>
<style scoped lang="scss">
.sub-el-icon,
.nav-icon {
display: inline-block;
font-size: 15px;
margin-right: 12px;
position: relative;
}
.svg-icon {
width: 1em;
height: 1em;
position: relative;
fill: currentColor;
vertical-align: -2px;
}
</style>
2.4 使用svg-icon 仅作示例
<svg-icon :iconClass="prop.iconName" className="icon"></svg-icon>
3、elemen plus
3.1安装及使用方法
详见element plus,点击链接
3.2动态渲染element plus
<component class="commonIconClass" :is="prop.iconName" v-else></component>
4、总结
如何既要又要呢,这里建议可以给icon字体图标一个类型。
代码如下:
<svg-icon v-if="prop.iconType == 'svg'" :iconClass="prop.iconName" className="icon"></svg-icon>
<component class="commonIconClass" :is="prop.iconName" v-else></component>
以上就是这次的内容,如有其他方法自行去验证。如有大佬觉得有优化的地方,可以给在下一些指点。