vue3- antd design vue 引入iconfont

news2024/11/23 1:18:01

文章目录

  • 前言
  • 一、新建iconfont项目


前言

vue3项目中,如何引入第三方的iconfont的图标


一、新建iconfont项目

在这里插入图片描述
搜索需要的图标,加入购物车,购物车中图片加入项目
在这里插入图片描述
下载项目文件,打开压缩包后,将iconfont.js 文件拷贝到项目的src/assets/iconfont目录下。目录不存在需要手动创建。

import { createFromIconfontCN } from '@ant-design/icons-vue'

const IconFont = createFromIconfontCN({
  scriptUrl: import('@/assets/iconfont/iconfont.js')
})

# 实用图标
<icon-font style="font-size: 18px" type="icon-home" />

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

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

相关文章

基于vue框架的大学生心理健康服务平台mwavu(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;学生,心理专家,心理咨询,健康文章,咨询回复,心理案例,监测预警,解压游戏,放松音乐 开题报告内容 基于Vue框架的大学生心理健康服务平台开题报告 一、研究背景与意义 随着社会的快速发展和教育竞争的日益激烈&#xff0c;大学生面临着…

SpringBoot教程(二十四) | SpringBoot实现分布式定时任务之Quartz

SpringBoot教程&#xff08;二十四&#xff09; | SpringBoot实现分布式定时任务之Quartz 简介适用场景Quartz核心概念Quartz 存储方式Quartz 版本类型引入相关依赖方式一&#xff1a;内存方式(MEMORY)存储实现定时任务1. 定义任务类2. 定义任务描述及创建任务触发器3. Quartz的…

VirtualBox Ubuntu22.04 NOI linux2.0 Terminal无法打开 终端打不开 两步解决法儿

新安装的虚拟机无法打开Terminal&#xff0c;从应用列表中单击Terminal&#xff0c;左上角任务栏会出现Terminal&#xff0c;并且鼠标转圈&#xff0c;但是过一会左上角Terminal消失&#xff0c;就像一切都没有来过。 解决办法&#xff1a; CTRL ALT F3 进入命令行模式&…

【自然语言处理】补充:基于向量空间的分类器

【自然语言处理】补充:基于向量空间的分类器 文章目录 【自然语言处理】补充:基于向量空间的分类器1. 特征选择2. 基于向量空间的分类方法3. Rocchio4. KNN5. 线性分类器1. 特征选择 特征选择 文本分类中,通常要将文本表示在一个高维空间下,每一维对应一个词项许多维上对应…

如何基于vite实现清除特定环境下的console和debugger

一、解决方法 方法一&#xff1a;使用esbuild 直接在vite.config.ts文件中写&#xff0c;无需下载插件 export default defineConfig(({ mode }) > {// 环境变量const env loadEnv(mode, root, "");return {base: env.VITE_PUBLIC_PATH,plugins: [vue(),...],…

中国书法-孙溟㠭浅析碑帖《九成宫醴泉铭》

中国书法孙溟㠭浅析碑帖《九成宫醴泉铭》 《九成宫醴泉铭》是由魏征撰文、欧阳询书丹&#xff0c;唐贞观六年&#xff08;公元632年&#xff09;立碑&#xff0c;篆书体题碑额。内容记载了唐太宗李世民在九成宫避暑山庄发现涌泉的事。 书法法度森严&#xff0c;腴润中见峭劲&…

图文并茂解释水平分表,垂直分表,水平分库,垂直分库

文章目录 1.垂直角度(表结构不一样)垂直分表:垂直分库&#xff1a; 2.水平角度(表结构一样)水平分库&#xff1a;水平分表&#xff1a; 1.垂直角度(表结构不一样) 垂直分表: 将一个表字段拆分成多个表&#xff0c;每个表存储部分字段。好处是避免IO时锁表的次数&#xff0c;分…

数据结构——遍历二叉树

目录 什么是遍历二叉树 根据遍历序列确定二叉树 例题&#xff08;根据先序中序以及后序中序求二叉树&#xff09; 遍历的算法实现 先序遍历 中序遍历 后序遍历 遍历算法的分析 二叉树的层次遍历 二叉树遍历算法的应用 二叉树的建立 复制二叉树 计算二叉树深度 计算二…

java发起POST方法请求第三方接口(编码处理)

文章目录 引言I 案例查询船舶轨迹配置JVM编码参数请求提供方常见问题II 工具类III 知识扩展:程序运行源代码各个阶段对编码的处理Java源码--->字节码Java字节码--->虚拟机--->操作系统操作系统-->显示设备引言 使用场景: 调用第三方平台接口 I 案例 查询船舶…

【MySQL】--数据类型

文章目录 1. 选择数据库1.1 语法 2. 查询当前选中的数据库2.1 语法 3. 常见数据类型分类4. 数据值类型4.1 类型列表4.2 数据类型取值范围 5. 字符串类型5.1 类型列表5.2 关于排序5.3 CHAR和VARCHAR的区别5.4 如何选择CHAR和VARCHAR5.5 VARCHAR与TEXT的区别 6. 日期类型6.1 类型…

基于SSM的仿win10界面的酒店管理系统

基于SSM的仿win10界面的酒店管理系统 运行环境: jdk1.8 eclipse tomcat7 mysql5.7 项目技术: jspssm&#xff08;springspringmvcmybatis&#xff09;mysql 项目功能模块&#xff1a;基础功能、房间类型、楼层信息、附属功能

重学SpringBoot3-集成Redis(六)之消息队列

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-集成Redis&#xff08;六&#xff09;之消息队列 1. 什么是发布/订阅&#xff08;Pub/Sub&#xff09;&#xff1f;2. 场景应用3. Spring Boot 3 整合 R…

EtherNet/IP 转 EtherNet/IP, EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 协议转换通信网关 EtherNet/IP 转 EtherNet/IP GW系列型号 MS-GW22 概述 简介 MS-GW22 是 EtherNet/IP 和 EtherNet/IP 协议转换网关&#xff0c;…

4.扩散模型的似然函数最大化(1)

1.似然函数最大化 扩散模型的训练目标是负的对数似然的一个变分下界(VLB)。在本节中&#xff0c;我们总结并调查最近关于扩散模型的似然最大化的工作。首先我们介绍似然函数最大化的意义&#xff0c;然后重点讨论3种类型的方法:噪声调度优化、逆向方差学习和精确的对数似然估计…

20年408数据结构

第一题&#xff1a; 解析&#xff1a;这种题可以先画个草图分析一下&#xff0c;一下就看出来了。 这里的m(7,2)对应的是这图里的m(2,7),第一列存1个元素&#xff0c;第二列存2个元素&#xff0c;第三列存3个元素&#xff0c;第四列存4个元素&#xff0c;第五列存5个元素&#…

胤娲科技:00后揭秘——AI大模型的可靠性迷局

当智能不再“靠谱”&#xff0c;我们该何去何从&#xff1f; 想象一下&#xff0c;你向最新的GPT模型提问&#xff1a;“9.9和9.11哪个大&#xff1f;”这本应是个小菜一碟的问题&#xff0c;却足以让不少高科技的“大脑”陷入沉思&#xff0c; 甚至给出令人啼笑皆非的答案。近…

卡码网104.建造最大岛屿

题目 104. 建造最大岛屿 (kamacoder.com) 代码&#xff08;ACM 首刷看解析&#xff09;&#xff1a; #include<iostream> #include<vector> #include<unordered_map> #include<unordered_set> using namespace std;int dir[4][2] {1,0,-1,0,0,1,0,-…

C++ 算法学习——1.8 悬线法

1.问题引入&#xff1a;对于一个矩形图&#xff0c;图中放置着不少障碍&#xff0c;要求出最大的不含障碍的矩形。 2.分析&#xff1a;显然一个极大矩形是左右上下都被障碍挡住&#xff0c;无法再扩大的矩形&#xff0c;此时障碍也包括边界。 3.方法&#xff1a;悬线法考虑以…

计算机组成原理实验三 数据寄存器组R0..R3, MAR, ST, OUT

实验目的和要求 目的&#xff1a;了解模型机中各种寄存器结构、工作原理及其控制方法。 要求&#xff1a;利用CP226 实验系统上的K16..K23 开关做为DBUS 的数据&#xff0c;其它开关做为控制信号&#xff0c;将数据写入寄存器&#xff0c;数据寄存器组R0..R3&#xff0c;地址…

【大数据】Flink CDC 实时同步mysql数据

目录 一、前言 二、Flink CDC介绍 2.1 什么是Flink CDC 2.2 Flink CDC 特点 2.3 Flink CDC 核心工作原理 2.4 Flink CDC 使用场景 三、常用的数据同步方案对比 3.1 数据同步概述 3.1.1 数据同步来源 3.2 常用的数据同步方案汇总 3.3 为什么推荐Flink CDC 3.4 Flink …