Vue3引入彩色阿里巴巴Iconfont图标

最新推荐文章于 2025-09-26 17:40:53 发布

原创最新推荐文章于 2025-09-26 17:40:53 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #icons

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在Vue项目中集成阿里巴巴矢量图标库，包括下载代码、全局引入及自定义Iconfont组件的方法。

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名称前需加#