【React】在移动端使用iconfont图标库

news2024/10/6 14:37:26

1、首先将需要的图标加入购物车
在这里插入图片描述

2、点击右上角的购物车,将购物里的图标添加到项目中

在这里插入图片描述

3、点击添加项目就会有选择的项目,选择后保存
如果有项目可以直接选择需要添加的项目,没有的需要新建项目存放到项目中
在这里插入图片描述
4、确定之后进入我的项目中,选择Symbol,点击复制代码
在这里插入图片描述
5、在react项目中,打开public/index.html

//在此文件内添加
 <script src="https://xxxxxxxxxxxxxxxxx"></script>
//将src内替换成Symbol复制的代码,并且前面需要添加https:

6、使用iconfont图标

<svg className="icon" aria-hidden="true">
	 <use xlinkHref="icon-home"></use>
</svg>

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

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

相关文章

【初阶C++】前言

C前言 1. 什么是C2. C发展史3. C的重要性4. 如何学习C 1. 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; …

网神 SecGate3600 authManageSet.cgi信息泄露漏洞复现

漏洞概述 网神SecGate 3600 authManageSet.cgi 接口存在敏感信息泄露漏洞&#xff0c;未授权得攻击者可以通过此漏洞获取控制台管理员用户名密码等凭据&#xff0c;可登录控制整个后台&#xff0c;使系统处于极不安全的状态 复现环境 FOFA&#xff1a;body"sec_gate_im…

开源 CAD 计算机辅助设计软件,基于 Node.js 开发,使用浏览器进行访问-供大家学习研究参考

下载&#xff1a;开源CAD计算机辅助设计软件&#xff0c;基于Node.js开发&#xff0c;使用浏览器进行访问-供大家学习研究参考资源-CSDN文库 https://download.csdn.net/download/weixin_43097956/88623022

昇腾910安装驱动出错,降低Centos7.6的内核版本

零、问题描述&#xff1a; 在安装Atlas800-9000服务器的驱动的时候&#xff0c;可能会出现错误&#xff1a;Dkms install failed, details in : /var/log/ascend_seclog/ascend_install.log 如下所示&#xff1a; [rootlocalhost ~]# ./Ascend-hdk-910-npu-driver_23.0.rc3_l…

Python和Beautiful Soup爬虫助力提取文本内容

大家好&#xff0c;网络爬虫是一项非常抢手的技能&#xff0c;收集、分析和清洗数据是数据科学项目中最重要的部分。今天介绍如何从链接中爬取高质量文本内容&#xff0c;我们使用迭代&#xff0c;从大约700个链接中进行网络爬取。如果想直接跳转到代码部分&#xff0c;可以在下…

如何通过IDM进行统一权限

IDM身份管理平台在当今企业信息化建设中扮演着至关重要的角色&#xff0c;它不仅仅关乎用户身份的管理&#xff0c;更牵涉到对企业内部各种资源的合理分配和访问控制。其中&#xff0c;统一权限是 IDM 的一个核心概念&#xff0c;它通过集中管理用户的身份和访问权限&#xff0…

【EventBus】EventBus源码浅析

二、EventBus源码解析 目录 1、EventBus的构造方法2、订阅者注册 2.1 订阅者方法的查找过程2.2 订阅者的注册过程1. subscriptionsByEventType 映射&#xff1a;2. typesBySubscriber 映射&#xff1a;2.3 总结订阅者的注册过程 3、事件的发送 3.1 使用Post提交事件3.2 使用p…

Baumer工业相机堡盟工业相机如何通过BGAPISDK获取相机的各种信息如SN/ID等等(C#)

Baumer工业相机堡盟工业相机如何通过BGAPISDK获取相机的各种信息如SN/ID等等&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机通过SDK获取相关生产信息的技术背景通过SDK获取相机信息的代码分析获取Baumer工业相机相关信息Baumer工业相机相关参数信息获取的测试 Baume…

GoLang EASY 微服务游戏框架 01

1 Overview EASY 是一个go语言编写的框架&#xff0c;兼容性支持go版本1.19&#xff0c;go mod 方式构建管理。它是一个轻型&#xff0c;灵活&#xff0c;自定义适配强的微服务框架。 它支持多种网络协议TCP&#xff0c;websocket&#xff0c;UDP&#xff08;待完成&#xf…

MySQL笔记-第12章_MySQL数据类型精讲

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第12章_MySQL数据类型精讲1. MySQL中的数据类型2. 整数类型2.1 类型介绍2.2 可选属性2.2.1 M2.2.2 UNSIGNED2.2.3 ZEROFILL 2.3 适用场景2.4…

蓝桥杯第一场强者挑战赛(C)SOSdp

之前在cf上面接触过SOSdp&#xff08;子集dp&#xff09;&#xff0c;这里就碰到了。 思路&#xff1a; 异或运算即非进位加法运算&#xff0c;因此如果需要进位的话&#xff0c;那么就无法满足题意&#xff0c;因此条件弱化为不需要进位&#xff0c;也就是不存在同一位上面都是…

JVM面试

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.JVM 的整体结构2.类加载做了哪些事情?类加载器有哪些&#xff1f;双亲委派和沙箱安全 3.Java虚拟机栈是什么4.方法区的理解HotSpot 中方法区的演进方法区的内部结…

bind、call、apply 区别?

作用 call、apply、bind作用是改变函数执行时的上下文&#xff0c;简而言之就是改变函数运行时的this指向 那么什么情况下需要改变this的指向呢&#xff1f; 下面举个例子 var name "lucy"; var obj {name: "martin",say: function () {console.log(…

手机网站支付有风险吗?

这是一个在当今数字化时代中&#xff0c;消费者们常常会提出的问题。随着科技的发展和移动设备的普及&#xff0c;越来越多的商家开始接受在线支付&#xff0c;这无疑为消费者提供了极大的便利。然而&#xff0c;与此同时&#xff0c;也伴随着一些潜在的风险。本文将探讨手机网…

使用过滤器Filter实现请求拦截

早期使用servlet进行网络开发时&#xff0c;没有拦截器这些内容&#xff0c;那时做请求拦截都是使用Filter过滤器实现的&#xff0c;配置Filter要对哪些请求路径处理&#xff0c;有权限或不需要拦截的路径放行&#xff0c;没有权限的路径直接拦截请求。 一、Filter直接进行拦截…

SpringBoot之请求的详细解析

1. 请求 在本章节呢&#xff0c;我们主要讲解&#xff0c;如何接收页面传递过来的请求数据。 1.1 Postman 之前我们课程中有提到当前最为主流的开发模式&#xff1a;前后端分离 在这种模式下&#xff0c;前端技术人员基于"接口文档"&#xff0c;开发前端程序&…

I.MX RT1170双核学习(1):双核通信之MU消息单元详解

在I.MX RT1170中&#xff0c;它有CM7和CM4核&#xff0c;而消息单元(MU)模块使SoC内的两个处理器能够通过MU接口传递消息以进行通信和协调。 文章目录 1 MU特性2 功能描述3 MU通信实例3.1 轮训实现多核通信3.1.1 MU_SetFlags和MU_GetFlags3.1.2 MU_SendMsg和MU_ReceiveMsg3.1.…

阿里云国际版无法远程连接Windows服务器的排查方法

如果您遇到紧急情况&#xff0c;需要尽快登录Windows实例&#xff0c;请参见以下操作步骤&#xff0c;先检查ECS实例的状态&#xff0c;然后通过云助手向Windows实例发送命令或通过VNC登录实例&#xff0c;具体步骤如下&#xff1a; 步骤一&#xff1a;检查ECS实例状态 无论何…

CentOS 7 源码部署 Nginx

文章目录 1. 概述2. 部署示例2.1 下载和解压 Nginx 源码2.2 安装编译依赖包2.3 编译和安装2.4 启动 Nginx2.5 配置防火墙2.6 设置 Nginx 为系统服务2.7 配置访问 3. 扩展知识 1. 概述 Nginx 是一款高性能的开源 Web 服务器软件&#xff0c;广泛应用于互联网领域。本篇博客将介…

pytest-fixtured自动化测试详解

fixture的作用 1.同unittest的setup和teardown,作为测试前后的初始化设置。 fixture的使用 1.作为前置条件使用 2.fixture的的作用范围 1.作为前置条件使用 pytest.fixture() def a():return 3def test_b(a):assert a3 2.fixture的作用范围 首先实例化更高范围的fixture…