【React】前端项目引入阿里图标

【React】前端项目引入阿里图标

  • 方式1
    • 1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;
    • 2、加入并进入到项目中去选择Font class 并下载到本地
    • 3、得到的文件夹如下
    • 4. 把红框中的部分粘贴到自己的项目中(public 文件目录下);
    • 5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确
    • 6. 项目中使用图标
  • 方式2
    • 1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;
    • 2、加入并进入到项目中去选择Symbol点击复制代码
    • 3、安装@ant-design/icons
    • 4. 新建一个MyIcon.js文件内容如下
    • 5、在项目中使用

方式1

1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;

在这里插入图片描述

2、加入并进入到项目中去选择Font class 并下载到本地

在这里插入图片描述

3、得到的文件夹如下

在这里插入图片描述

4. 把红框中的部分粘贴到自己的项目中(public 文件目录下);

在这里插入图片描述

5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确

<link rel="stylesheet" href="./iconfont/iconfont.css">   // 引入阿里云字体图标css

6. 项目中使用图标

//注意:iconfont是固定的,icon-sousuokuang为图片红框部分
<i className='iconfont sousuokuang'></i>

注意:iconfont是固定的,icon-sousuokuang为图片红框部分
在这里插入图片描述

方式2

1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;

在这里插入图片描述

2、加入并进入到项目中去选择Symbol点击复制代码

  • 重点注意!!!记得先点击更新代码再点击复制获取得到链接,在开发中,有一个坑,有些同学中途在图标项目中添加了新的图标,然后没有及时更新获取链接,导致使用新图标时不显示。
    在这里插入图片描述

3、安装@ant-design/icons

npm install --save @ant-design/icons

4. 新建一个MyIcon.js文件内容如下

import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
export default MyIcon

5、在项目中使用

//引入图标组件,注意路径
import MyIcon  from './MyIcon.js'
<MyIcon type="(你的icon名字)"/>

注意:你的icon名字 icon-sousuokuang为图片红框部分
在这里插入图片描述
最后,如果能帮到您
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VirtualBox中Ubuntu硬盘扩容

1.选中要扩容的虚拟机点击属性按钮&#xff0c;选择存储后点击控制器&#xff1a;STAT右边的 按钮 2.创建虚拟硬盘 在弹出框中选择创建按钮&#xff0c;选择VDI后点击下一步按钮 选择动态分配后点击下一步按钮 3.设置文件位置和大小 选择要保存的虚拟硬盘文件路径&#xff0c…

编程语言与编程工具总结

✍️作者简介&#xff1a;小北编程&#xff08;专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向&#xff09; &#x1f433;博客主页&#xff1a; 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN &#x1f514;如果文章对您些帮助请&#x1f449;关…

iOS 微信分身(Windows手把手教程)

我之前教过大家IOS里面去创建微信应用副本(懂的都懂)。那个教程是MAC的教程版本。就有小伙伴问到&#xff0c;有没有Windows的教程版本呢。其实相差不多&#xff0c;但&#xff0c;不过谁叫我宠粉呢。 如果你使用的Mac版本的请参考这篇文章 1. iOS 微信应用副本 (免费&安…

如何使用wireshark解析二进制文件

目录 目录 1.将已有的packet raw data按照下面格式写入文本文件中 a. Raw IP packet b. Ethernet packet 2.用wiershark导入hex文件 3.设置对应的packet类型 a. Raw IP packet b. Ethernet packet 1.将已有的packet raw data按照下面格式写入文本文件中 a. Raw IP pac…

mysql 一条查询语句执行过程顺序

整体架构 client connectors&#xff1a; mysql提供各种语言连接客户端api&#xff0c;client发送sql语句到server端进行执行 连接器&#xff08;Connectors&#xff09;&#xff1a;连接器负责客户端与服务端进行连接&#xff0c;使用mysql协议或X协议使得客户端可以通过api…

布尔逻辑与逻辑门

计算机为什么使用二进制&#xff1a; 计算机的元器件晶体管只有 2 种状态&#xff0c;通电&#xff08;1&#xff09;& 断电&#xff08;0&#xff09;&#xff0c;用二进制可直接根据元器件的状态来设计计算机。而且&#xff0c;数学中的“布尔代数”分支&#xff0c;可以…

Web前端入门 - HTML JavaScript Vue

ps&#xff1a;刚开始学习web前端开发&#xff0c;有什么不正确、不标准的内容&#xff0c;欢迎大家指出~ Web简介 90年代初期&#xff0c;Web1.0&#xff0c;静态页面&#xff0c;不和服务器交互&#xff0c;网页三剑客指Dreamweaver、Fireworks、Flash2000年代中期&#xf…

《Numpy 简易速速上手小册》第4章:Numpy 数学和统计计算(2024 最新版)

文章目录 4.1 基础统计运算4.1.1 基础知识4.1.2 完整案例&#xff1a;市场调研分析4.1.3 拓展案例 1&#xff1a;股市收益分析4.1.4 拓展案例 2&#xff1a;环境监测数据处理 4.2 线性代数运算4.2.1 基础知识4.2.2 完整案例&#xff1a;解线性方程组4.2.3 拓展案例 1&#xff1…

C Primer Plus第4章编程题

文章目录 printf()和scanf()的*修饰符C Primer Plus第4章编程题 1.printf()和scanf()的*修饰符 printf()和scanf()都可以用*修饰符来修改转换说明的含义。 printf()的*修饰符&#xff1a;如果你不想预先指定字段宽度&#xff0c;希望通过程序来指定&#xff0c;那么可以使用*修…

AI 神助攻,协同办公神器 ---- ONLYOFFICE

人工智能不会取代人&#xff0c;只会淘汰那些不会使用人工智能的人。 – 鲁迅 一、人工智能重新定义办公新模式 随着GPT的横空出世&#xff0c;AI的应用场景已经无处不在&#xff0c;从智能客服、智能语音助手、智能家居到自动驾驶汽车等&#xff0c;AI正在不断地拓展其应用领…

HTML+JavaScript-06

节点操作 目前对于节点操作还是有些困惑&#xff0c;只是了解简单的案例 具体操作可以看菜鸟教程&#xff1a;https://www.runoob.com/js/js-htmldom-elements.html 案例-1 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8…

考研高数(共轭根式)

1.定义 共轭根式&#xff1a;是指两个不等于零的根式A、B&#xff0c;若它们的积AB不含根式&#xff0c;则称A、B互为共轭根式。 共轭根式的一个显著特点是通过相乘能把根号去掉&#xff0c;这是很有帮助的 2.常用的共轭根式 3.例题 1&#xff09;求极限 2&#xff09;证明…

【超详细教程】2024最新Pytorch安装教程(同时讲解安装CPU和GPU版本)

目录 一、前言 二、pytorch简介 三、安装准备工作 3.1、下载Anaconda 四、判断是否有NVIDIA显卡 五、安装pytorch-CPU版本 六、安装pytorch-GPU版本 6.1、查看CUDA显卡驱动版本 6.2、安装CUDA 6.3、安装CuDNN&#xff08;加速器&#xff09; 6.4、安装pytorch-GPU 七…

从一个小故事讲解观察者模式~

定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 什么是观察者模式&#xff1f; 观察者模式在我们的日常生活中极其常见。 先来看看观察者模式的定义&#xff1a; 观察者模式定义了对象之间…

SV-7041T 多媒体教学广播IP网络有源音箱

SV-7041T是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率30W。同时它可以外接一个30W的无源副音箱&#xff0c;用在面积较大的场所。5寸进口全频低音喇…

OCP NVME SSD规范解读-8.SMART日志要求-3

SMART-11&#xff1a;这个属性记录的是用户数据区的NAND块最大擦写次数和最小擦写次数。其中&#xff0c;字节地址95:92表示最小用户数据擦写计数&#xff0c;而字节地址91:88表示最大用户数据擦写计数。这两个数值反映了闪存芯片在使用过程中的磨损程度&#xff0c;是评估SSD剩…

springboot集成 mysql快速入门demo

一、mysql环境搭建 采用docker-compose搭建&#xff0c;配置如下&#xff1a; docker-compose.yml version: 3 services:mysql:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/mysql:5.7 # 原镜像mysql:5.7container_name: mysql_3306 …

Github 2024-01-30 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-30统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4TypeScript项目2Jupyter Notebook项目2HTML项目1Rust项目1C项目1 稳定扩散Web UI 创建周期&…

使用企业微信一年要花费多少钱?

从今天开始&#xff0c;大力将为大家呈现一个新的话题——“企微问答”&#xff0c;大家有什么问题可以回复我们的公众号&#xff0c;如果你是严肃认真的提问&#xff0c;我们会严肃认真的给你一个答案。今日问题 &#xff1a;用企业微信一年要花多少钱 使用企业微信要花多少钱…

element-ui中的el-date-picker 页面至字显示不全的原因及解决

显示不全原因&#xff1a;.el-range-separator的宽度为5%,相对于外层的父元素不够 解决方案&#xff1a;加宽度 <style> .el-range-separator{width: 20px !important; } </style>解决图如下