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

对于使用 iconfont.cn 的用户,通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段,
即可轻松地使用已有项目中的图标。

组件封装 IconFont

<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>

使用

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

阿里图标库添加链接描述

在这里插入图片描述
symbol 生成链接粘贴进去即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web应用和Tomcat的集成鉴权1-BasicAuthentication

作者:私语茶馆 1.Web应用与Tomcat的集成式鉴权 Web应用部署在Tomcat时,一般有三层鉴权: (1)操作系统鉴权 (2)Tomcat容器层鉴权 (3)应用层鉴权 操作系统层鉴权包括但不限于:Tomcat可以和Windows的域鉴权集成,这个适合企业级的统一管理。也可以在Tomcat和应用层独立…

湖南(市场调研)源点咨询 新产品上市前市场机会调研与研究分析

湖南源点调研认为&#xff1a;无论是创业公司&#xff0c;还是在公司内部探索新的项目或者新的产品线等&#xff0c;首先都要做“市场机会分析与调研“&#xff0c;要真正思考并解答以下疑问&#xff1a; 我们的目标客户群体是谁&#xff0c;他们如何决策&#xff1f; 我们所…

windows下mysql修改 my.ini的datadir后 `Access denied`

1. 背景 window安装mysql数据库时&#xff0c;不能指定数据文件存放位置&#xff08;默认安装路径 "C:/ProgramData"&#xff09;。 只能通过修改mysql.ini来更改数据文件存放目录。 2. 问题&#xff1a; 修改mysql.ini后&#xff0c;mysql 出现 "Access den…

Python爬虫学习 | Scrapy框架详解

一.Scrapy框架简介 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总共有四大部分&am…

【Java】已解决java.lang.NoSuchMethodException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.lang.NoSuchMethodException异常 在Java编程中&#xff0c;java.lang.NoSuchMethodException是一个常见的运行时异常&#xff0c;它通常表示尝试通过反射调用一个不存在…

耳夹式佩戴的舒适体验,拥有AI功能的生活助手,塞那Z50耳夹耳机上手

在数码产品层出不穷的今天&#xff0c;一款能够脱颖而出的耳机&#xff0c;不仅要有出色的音质&#xff0c;更要有人性化的设计和独特的功能。最近我就发现了这么一款很有趣的耳机&#xff0c;它是来自sanag塞那Z50耳夹耳机&#xff0c;这款耳机有着新颖的佩戴方式和动听的音质…

「动态规划」如何求子数组中等差数列的个数?

413. 等差数列划分https://leetcode.cn/problems/arithmetic-slices/description/ 如果一个数列至少有三个元素&#xff0c;并且任意两个相邻元素之差相同&#xff0c;则称该数列为等差数列。例如&#xff0c;[1,3,5,7,9]、[7,7,7,7]和[3,-1,-5,-9]都是等差数列。给你一个整数…

win10环境配置ollama-ui运行llama3模型

先说我的笔记本电脑配置intel-i7-11390h,4核8处理器&#xff0c;内存16G。显卡NVIDA GeFroce MX450&#xff0c;2G显存&#xff0c;这是一台5000元左右的电脑。 我用它跑roop、sd1.5、ffusion2、ChatTTs还有pythonpytorch的自定义模型&#xff0c;现在用来跑llama3。当然&…

Redis-数据类型-Bit的基本操作-getbit-setbit-Bitmap

文章目录 0、Bitmaps&#xff08;位图&#xff09;1、查看redis是否启动2、通过客户端连接redis3、切换到db7数据库4、设置&#xff08;或覆盖&#xff09;一个键&#xff08;key&#xff09;的值&#xff08;value&#xff09;5、获取存储在给定键&#xff08;key&#xff09;…

32.基于分隔符解决黏包和半包

LineBasedFrameDecoder 基于换行/n (linux)或回车换行/r/n(windows)进行分割。 使用LIneBasedFrameDecoder构造方法,需要设定一个最大长度。 如果超过了最大长度,还是没有找到换行符,就这位这个数据段太长了,抛出ToolLongFrameException DelimiterBasedFrameDecoder …

YOLOv8白皮书-第Y7周:训练自己的数据集

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、环境 语言&#xff1a;Python3、Pytorch开发环境电脑系统&#xff1a;Windows 10语言环境&#xff1a;Python 3.9.2编译器&#xff1a;VS Code显卡&#…

上交商汤联合提出一种虚拟试穿的创新方法,利用自监督视觉变换器 (ViT) 和扩散模型

上交&商汤联合提出一种虚拟试穿的创新方法&#xff0c;利用自监督视觉变换器 (ViT) 和扩散模型&#xff0c;强调细节增强&#xff0c;通过将 ViT 生成的局部服装图像嵌入与其全局对应物进行对比。虚拟试穿体验中细节的真实感和精确度有了显着提高&#xff0c;大大超越了现有…

Honeyview图片查看:从未如此流畅

名人说&#xff1a;一点浩然气&#xff0c;千里快哉风。 ——苏轼 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、软件介绍1、Honeyview2、核心特点 二、下载安装1、下载2、安装 三、使用方法1、图片打开2、自…

FP7195做大功率钓鱼灯应用方案,0.1%深度无极无频闪调光调色应用,调光曲线顺滑无突兀

文章目录 文章目录 方案背景 一、夜钓灯电路框架 二、FP7195芯片介绍 芯片参数 总结 方案背景 目前夜钓正在逐渐变得时尚起来&#xff0c;随着夜钓群体的年轻化&#xff0c;人们对于夜钓灯的审美要求也越来越高。夜钓灯作为夜间钓鱼的重点装备&#xff0c;不仅仅需要高质量的光…

RIP路由协议汇总、版本兼容、定时器、协议优先级配置(华为)

#交换设备 RIP路由协议汇总 一、原理概述 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总&#xff08;又称路由汇聚或路由聚合&#xff09;来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。路由汇总的原理是&#xff0c;同一个自然网段内的…

AI音乐模型:创新还是颠覆?

文章目录 AI音乐大模型的崛起音乐创作门槛的降低与兴奋AI音乐作品的版权归属问题创意产业在AI阴影下的生长结语 &#x1f389;欢迎来到AIGC人工智能专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&…

【C++课程设计】校园导游程序及通信线路设计

私信我获得论文 问题描述&#xff1a; 设计校园平面图&#xff0c;所含景点不少于10个。以图中顶点表示校内各景点&#xff0c;存放景点名称、代号、简介等信息&#xff1b;以边表示路径&#xff0c;存放路径长度等相关信息。 (1) 显示校园平面图&#xff08;用cout显示即可&a…

Docker开机自动重启及自动启动容器

Docker开机自动重启及自动启动容器 Windows开机自动重启设置容器自动启动 Windows开机自动重启 勾选 Start Docker Desktop when you sign in to your computer 设置容器自动启动 1.docker update 命令 Usage: docker update [OPTIONS] CONTAINER [CONTAINER...]Update co…

数据结构与算法-B(B-)树的简单实现

B(B-)树定义 B树&#xff08;或B-tree&#xff09;是一个在计算机科学中广泛使用的数据结构&#xff0c;它是一种自平衡的树&#xff0c;能够保持数据有序。 以下是B树的特性 每个节点最多右m个孩子&#xff0c;二叉树是B-树的特例&#xff0c;其有2个孩子。除了叶节点和根节点…

c++中从父类继承的属性在子类内存中如何显示?

目录 一、继承概念 二、示例 三、结论 一、继承概念 在C中&#xff0c;继承是面向对象编程的一个重要特性&#xff0c;它允许一个类&#xff08;称为派生类或子类&#xff09;继承另一个类&#xff08;称为基类或父类&#xff09;的成员&#xff08;包括数据成员和成员函数…