1、下载阿里巴巴矢量图标库代码(Symbol)
2、main.ts全局引入一下两个文件
import "../src/assets/iconfont/iconfont.js";
import "../src/assets/iconfont/iconfont.css";
3、自定义相应的Iconfont组件
<template>
ssssssssssssss
<svg class="icon" aria-hidden="true" :width="fontSize" :height="fontSize">
<use :xlink:href="class" :fill="color"></use>
</svg>
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue";
const props = defineProps({
class: String, //需要添加的字体图标类
color: {
//图标颜色
type: String,
default: "#444",
},
fontSize: {
//图标大小
type: [String, Number],
default: 16,
},
});
</script>
<style scoped>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4、引入组件使用即可
<template>
<div class="aa">
舆情管理页面
<div class="iconfont icon-daohang_jifen-xuanzhong"></div>
<Icon :class="'#icon-test'"></Icon>
</div>
</template>
<script setup lang="ts">
import Icon from '../../components/Icon/index.vue';
</script>
<style scoped></style>
注:Icon名称前需加#