【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为图片红框部分
在这里插入图片描述
最后,如果能帮到您
在这里插入图片描述

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

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

相关文章

爬虫入门到精通_基础篇4(BeautifulSoup库_解析库,基本使用,标签选择器,标准选择器,CSS选择器)

1 Beautiful说明 BeautifulSoup库是灵活又方便的网页解析库&#xff0c;处理高效&#xff0c;支持多种解析器。利用它不用编写正则表达式即可方便地实线网页信息的提取。 安装 pip3 install beautifulsoup4解析库 解析器使用方法优势劣势Python标准库BeautifulSoup(markup,…

Web3.0初探

Web3.0初探 一、互联网发展史二、什么是Web3.0&#xff1f;三、现在的发展方向&#xff08;衍生出来的产品&#xff09;&#xff1a;四、目前问题五、Web3.0与元宇宙 一、互联网发展史 Web3.0也就是第三代互联网。最新版本的Web3.0是以太坊的创始合伙人Gavin Wood在2014年提出…

Redis核心技术与实战【学习笔记】 - 7.Redis GEO类型 - 面向 LBS 应用的数据类型

前言 前面&#xff0c;介绍了 Redis 的 5 大基本数据类型&#xff1a;String、List、Hash、Set、Sorted Set&#xff0c;它们可以满足绝大多数的数据存储需求&#xff0c;但是在面对海里数据统计时&#xff0c;它们的内存开销很大。所以对于一些特殊的场景&#xff0c;它们是无…

全面解析msvcr100.dll丢失的解决方法,关于msvcr100.dll文件丢失是如何显示的

msvcr100.dll文件的丢失是一个常见的问题&#xff0c;它会导致一些应用程序无法正常运行或出现错误。为了解决这个问题&#xff0c;我们可以采取多种方法。下面将介绍几种常用的msvcr100.dll丢失的解决方法&#xff0c;通过采用合适的方法&#xff0c;我们可以轻松解决该问题&a…

C#,入门教程(36)——尝试(try)捕捉(catch)不同异常(Exception)的点滴知识与源代码

上一篇&#xff1a; C#&#xff0c;入门教程(35)——哈希表&#xff08;Hashtable&#xff09;的基础知识与用法https://blog.csdn.net/beijinghorn/article/details/124236243 1、try catch 错误机制 Try-catch 语句包含一个后接一个或多个 catch 子句的 try 块&#xff0c;这…

Python爬虫:XPath基本语法

XPath&#xff08;XML Path Language&#xff09;是一种用于在XML文档中定位元素的语言。它使用路径表达式来选择节点或节点集&#xff0c;类似于文件系统中的路径表达式。 不啰嗦&#xff0c;讲究使用&#xff0c;直接上案例。 导入 pip3 install lxmlfrom lxml import etr…

初识人工智能,一文读懂机器学习之逻辑回归知识文集(6)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

指针深入了解7

1.qsort的模拟实现&#xff08;冒泡排序的原型制作&#xff09; 1.排序整型 int cmp_int(const void* p1, const void* p2) {return *((int*)p1) - *((int*)p2); } void swap(char* p1, char* p2)//完成交换 {int tmp *p1;*p1 *p2;*p2 tmp;} void bubble_sort(void* base,…

Django框架——第一个Django程序

大家好&#xff0c;在很久之前&#xff0c;我写了一系列关于Flask框架的文章&#xff0c;得到了不错的反馈&#xff0c;这次我打算写一系列关于Django框架的文章&#xff0c;希望大家多多支持&#xff0c;多给一些写作意见。 Django Django是用Python语言编写的开源web应用框…

matlab自定义函数实现图像小波变换

matlab中提供了小波变换函数lwt和ilwt&#xff0c;可以方便地实现提升小波变换。 我们按照小波变换的定义&#xff0c;粗糙地实现一个针对图像的小波变换&#xff0c;如下&#xff1a; % 使用方法&#xff1a; img imread(lena256.bmp); % 假设lena.png是灰度图像 subplot(2…

上门服务系统|如何搭建一款高质量的上门服务软件

预约上门系统源码开发是一项复杂而有挑战性的任务&#xff0c;但也是实现智能化预约服务的关键一步。通过自主开发预约上门系统的源码&#xff0c;企业可以完全定制系统的功能、界面和安全性&#xff0c;从而为用户提供更高效、便捷、个性化的预约体验。本文将带你深入了解预约…

S275智慧煤矿4G物联网网关:矿山开采的未来已来

随着经济发展煤矿需求不断激增&#xff0c;矿山矿井普遍处于偏远山区&#xff0c;生产管理、人员安全、生产效率是每个矿山矿井都需要考虑的问题&#xff0c;利用网关对现场终端设备连接组网&#xff0c;实现智慧煤矿远程管理。 各矿山矿井分布范围比较广泛&#xff0c;户外环…

(学习日记)2024.01.27

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

GNU链接脚本的MEMORY命令解析

1、GUN中对MEMORY指令的描述 《GUN的官网描述》 2、MEMORY命令的格式 MEMORY{name [(attr)] : ORIGIN origin, LENGTH len…}实例&#xff1a; MEMORY {/* 描述设备的内存区域 */rom (rxa) : ORIGIN 0x80000000, LENGTH 512Kram (wxa) : ORIGIN 0x80080000, LENGTH 51…

ElementUI 组件:Container 布局容器实例

ElementUI安装与使用指南 Container 布局容器 点击下载learnelementuispringboot项目源码 效果图 项目里el-container-example.vue代码 <script> export default {name: el_container_example,data() {const item {date: 2024-01-31,name: 国龙,address: 上海市某区…

并网逆变器学习笔记8---平衡桥(独立中线模块)控制

参考文献&#xff1a;《带独立中线模块的三相四线制逆变器中线电压脉动抑制方法》---赵文心 一、独立中线模块的三相四线拓扑 独立中线模块是控制中线电压恒为母线一半&#xff0c;同时为零序电流ineu提供通路。不平衡负载的零序电流会导致中线电压脉动&#xff0c;因此需要控制…

力扣hot100 分割回文串 集合 dfs

Problem: 131. 分割回文串 文章目录 思路Code&#x1f496; DP预处理版 思路 &#x1f468;‍&#x1f3eb; 参考题解 Code import java.util.ArrayDeque; import java.util.ArrayList; import java.util.Deque; import java.util.List;public class Solution {int n;//字符…

卷子怎么扫描成电子版?试试这些软件

卷子怎么扫描成电子版&#xff1f;随着科技的进步&#xff0c;越来越多的纸质文档正在被数字化所取代。如果你手头有一份纸质试卷&#xff0c;想要将其转化为电子版&#xff0c;却不知道该如何操作&#xff0c;那么今天我们将为你介绍5款软件&#xff0c;让你轻松实现这一目标。…

探索美颜技术:美颜SDK是什么?

今天&#xff0c;笔者将于大家一同探讨美颜技术&#xff0c;重点聚焦于美颜SDK的定义、工作原理以及在不同领域的应用&#xff0c;以期为读者带来一场有关美颜技术背后秘密的深度探索。 一、什么是美颜SDK&#xff1f; 美颜SDK是一套旨在为开发者提供美颜算法和功能的工具包。…

安卓主板_紫光展锐T820安卓主板方案定制

安卓主板采用了性能强劲的紫光展锐T820八核处理器&#xff0c;搭载了Android 13系统&#xff0c;为用户带来更加顺畅的操作体验。该主板不仅采用了6nm工艺&#xff0c;更加强大的算力和优越的性能&#xff0c;能够轻松实现多任务运行&#xff0c;不会出现卡顿现象。 此外&#…