基于vue3 + ant-design 使用阿里图标库iconfont.cn

对于使用 iconfont.cn 的用户,通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段,

即可轻松地使用已有项目中的图标。

组件封装 IconFont

javascript 复制代码
<template>
    <IconFont :type="iconType" />
</template>

<script setup lang="ts">

import { createFromIconfontCN } from '@ant-design/icons-vue';
// 创建从 Iconfont CN 获取图标的实例
const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_4591064_rhr61coyfx.js', // 替换为你实际的 scriptUrl
    //  scriptUrl 在阿里图标库里面去生成,添加新的图标都需要重新生成js文件
})

let props = defineProps<{ type?: string }>()

const iconType = ref<string>('')

iconType.value = props.type == undefined ? 'icon-tuichu' : props.type
</script>

<style scoped>
.icons-list :deep(.anticon) {
    margin-right: 6px;
    font-size: 24px;
}
</style>

使用

javascript 复制代码
import IconFont from '@/components/IconFont.vue'

<IconFont :type="'icon-shengdanye'"></IconFont>
// 绑定的type值需要在阿里图标库生成js的文件中

阿里图标库添加链接描述

symbol 生成链接粘贴进去即可

相关推荐
别拿曾经看以后~5 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死8 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人19 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人20 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR25 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香27 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969330 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai35 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91544 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍