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

news/2024/7/15 18:06:18 标签: react.js, 前端

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.niftyadmin.cn/n/5257307.html

相关文章

Vue中比较两个JSON对象的差异

要在Vue.js中实现JSON数据的对比差异功能&#xff0c;你可以使用一些库来简化任务&#xff0c;比如diff-match-patch。以下是一个简单的例子&#xff0c;演示如何使用deep-diff库在Vue.js中比较两个JSON对象的差异&#xff1a; 首先&#xff0c;确保你的项目中已经安装了diff-m…

单机版ElasticSearch健康状态yellow解决---ElasticSearch工作笔记035

ElasticSearch启动的时候报错: [2023-12-12T14:53:01,356][WARN ][r.suppressed ] [node-1] path: /.kibana/_doc/space%3Adefault, params: {index=.kibana, id=space:default} org.elasticsearch.action.NoShardAvailableActionException: No shard available f…

JavaFX窗口生成

JavaFX 窗口生成 JavaFX中存在Application类&#xff0c;用于窗口的初始化&#xff08;init()&#xff09;、显示&#xff08;show()&#xff09;、结束&#xff08;stop()&#xff09;操作。 步骤 &#xff08;不适用于jdk11及以上版本&#xff09; 调用静态方法launch(S…

JAVA如何调用python

以下代码想通过测试&#xff0c;必须有一个前提&#xff1a;电脑上安装了Python环境。不太习惯说废话&#xff0c;直接上代码了。 以下是用于测试的python代码&#xff08;mytest.py&#xff09;&#xff1a; # 因为用户到了参数处理&#xff0c;所以需要引用 import argpars…

golang版aes-cbc-pkcs7加密解密base64hex字符串输入输出

最近项目中golang项目中使用aes加解密&#xff0c;做个记录方便以后使用 aes-cbc-pkcs7加密解密base64输入输出 type AesBase64 struct {key []byte // 允许16,24,32字节长度iv []byte // 只允许16字节长度 }func NewAesBase64(key []byte, iv []byte) *AesBase64 {return &…

理解Go中的指针

引言 当你用Go编写软件时,你将编写函数和方法。你可以将数据作为参数传递给这些函数。有时,函数需要数据的本地副本,而你希望原始数据保持不变。例如,如果你是一家银行,你有一个函数向用户显示根据他们选择的储蓄计划而产生的余额变化,你不希望在客户选择计划之前更改他…

人工智能应用专栏----专栏介绍

文章目录 本专栏主要记录人工智能的应用方面的内容&#xff0c;包括chatGPT、AI绘图等等&#xff1b; 订阅后可私聊我获取 《从零注册并登录使用ChatGPT》 《从零开始使用chatGPT的API&#xff1b;通过chatgpt-next-web部署自己chatGPT web网页&#xff1b;无需翻墙&#xff0c…

ip地址怎么转化为十进制

​IP地址是在计算机网络中广泛使用的一种标识符&#xff0c;它用于唯一地标识网络上的设备。在网络通信过程中&#xff0c;IP地址扮演着非常重要的角色。但是&#xff0c;对于一些非专业人士来说&#xff0c;IP地址可能是一个陌生的概念。为了更好地理解IP地址&#xff0c;本文…