vue3 + element plus使用iconfont 自定义font组件&颜色大小可修改这里写自定义目录标题
参考网上方案新建SvgIcon.vue,但没说明怎么修改颜色及大小,我在这个博客中简单提供下。
自定义SvgIcon.vue
在componet目录下新建SvgIcon.vue组件
// src/components/SvgIcon.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :fill="color" :xlink:href="iconClassName"/>
</svg>
</template>
<script lang="ts" setup>
import {computed} from 'vue';
const props = defineProps({
iconName: {
type: String,
required: true
},
className: {
type: String,
default: ''
},
color: {
type: String,
default: '#409eff'
}
});
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
return `#${props.iconName}`;
});
// 给图标添加上类名
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`;
}
return 'svg-icon';
});
// 给图标添加上颜色
const color = computed(() => {
return props.color;
})
</script>
<script lang="ts">
export default {
name: 'svgIcon'
};
</script>
<style lang="less" scoped>
.svg-icon {
position: relative;
width: 1em;
height: 1em;
vertical-align: -2px;
fill: currentColor;
}
</style>
引入iconfont
在asserts文件夹中新建一个iconfont文件夹,并在该文件夹下新建一个iconfont.js,把iconfont复制下来即可
App.vue中引入组件
import SvgIcon from '@/components/iconfont/SvgIcon.vue';
import '@/assets/iconfont/iconfont.js';
import ElementPlus from 'element-plus';
// use
app.component('SvgIcon', SvgIcon).use(ElementPlus)
更改图标大小
使用el-icon即可,也可以在SvgIcon.vue中新建
<el-icon :size="14" class="icon">
<SvgIcon iconName="icon-xinjian" color="#fff"/>
</el-icon>