React 实战 | react项目使用图标iconfont

最新推荐文章于 2024-04-23 22:33:39 发布
最新推荐文章于 2024-04-23 22:33:39 发布
阅读量4.7k 收藏 12
点赞数 2
分类专栏： React 工具 文章标签： react iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35536883/article/details/96142364
版权
React 同时被 2 个专栏收录
21 篇文章 1 订阅
订阅专栏
工具
11 篇文章 0 订阅
订阅专栏

Iconfont平台

iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。

设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

如何引入React项目中

1.打开Iconfont官网，进入项目页面

2. 点击》下载至本地》解压文件夹

3.在项目src文件夹下创建static文件夹，并把上面的所有文件（除了前两个demo文件）导入static文件夹

4.在需要该图标的组件中加入css引用

<i class="iconfont">&#x33;</i>
// 或者
<i class="iconfont icon-xxx"></i>

更详细的配置可以看iconfont的帮助文档

以上就是使用iconfont的使用方法

辣爷
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： ...4.在终端使用以下命令，建立图标的联系 react-native link 5.使用方式 //字
react项目中如何引入iconfont图标
benbihuwang的博客
12-19 411
6.使用时也是iconfont1 <span className={`iconfont1 ${item.iconName}`}></span>2.再global.css引入css文件 @import url('../public//fonts//bimdosIcon//iconfont.css');也要修改类名为iconfont1 且 修改font-family: "iconfont1"!}中 font-family: "iconfont1";
在react中使用iconfont
MFWSCQ的博客
10-31 5988
一、基本使用 我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...
react引入iconfont的svg图标
最新发布
qq_23858785的博客
04-23 520
react引入iconfont的svg图标
iconfont在react中的使用
lesswenniang的博客
04-23 251
https://www.cnblogs.com/qdjj/p/12420541.html
react 使用iconfont 图标
一起学习前端知识，一起成为前端开发工程师！
10-12 2360
复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！
react中图标的使用
09-17 1859
图标库的种类 这里我们介绍2种：阿里图标库、font-Awesome font-Awesome的使用方法 1、去font-Awesome官网（http://www.fontawesome.com.cn/）下载font-Awesome文件夹 2、 将文件夹放到项目的public中 3、在index.html的head标签中加上 <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> 4、使用时直接写 <i
探索React Icons：一款高效且丰富的图标库
gitblog_00021的博客
03-19 960
探索React Icons：一款高效且丰富的图标库 项目地址:https://gitcode.com/react-icons/react-icons React Icons 是一个专为React开发者设计的图标库，它提供了大量高质量、易于使用的SVG图标，并支持多种图标集，如FontAwesome, MaterialIcons等。这篇文章将深入探讨这个项目的特性、技术实现以及如何利用它来提升你的应...
react项目如何使用iconfont的方法步骤
12-08
下面将详细阐述这个过程，包括配置项目、创建组件以及使用图标。 ### 配置项目 1. **选择图标类型**：Iconfont 提供了两种使用方式，FontClass 和 Symbol。FontClass 是基于字体的方式，通过类名来调用图标；...
react-iconfonts:一个React来智能地使用iconfont的项目
05-28
一个React智能地使用Iconfont的项目 安装 $ npm i -S react-iconfonts import IconFont from 'react-iconfonts' 图标字体 将您的图标（SVG）上传到您创建的图标项目，然后从 download.zip ，解压缩download.zip 。...
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
react-iconfont-cli 用纯JS把iconfont.cn的...此时项目根目录会生成一个iconfont.json的文件，内容如下： { "symbol_url": "请参考README.md，复制官网提供的JS链接", "use_typescript": false, "save_dir": "./s
react项目中使用iconfont字体图标
bidang3275的博客
05-21 3104
1. 复制iconfont字体图标文件到项目中 2. 在index.js项目入口文件中引入inconfont.css文件 3. 使用iconfont方式：正常使用即可 # 实体方式：需要加iconfont样式基类 <i className="iconfont">&#xe60f;</i> # 类方式：除了加iconfont样式基类外，还需要加对应的图标样式类名 <i className="iconfont icon-chufang"></i>
antd design react 使用 IconFont 图标库
noeal的博客
06-21 1455
antd design react 使用 IconFont 图标库
react使用字体图标iconfont
xiaocn325的博客
11-21 1306
react使用字体图标iconfont 第一步，进入到iconfont官网，选择图标管理进入我的项目，点击右上角的+号创建自己的项目； 创建完项目后可以去搜索自己想要的的图标，然后点击添加至购物车； 点击左上角的购物车就可以看见自己的图标，然后点击将图标加入自己的项目。 到我的项目下载图标至本地并解压，选择其中这几个文件 将这几个文件放到自己项目中的statics文件夹中，打开ico...
【React】在移动端使用iconfont图标库
Handsome_gir的博客
12-12 636
如果有项目可以直接选择需要添加的项目，没有的需要新建项目存放到项目中。5、在react项目中，打开public/index.html。4、确定之后进入我的项目中，选择Symbol，点击复制代码。2、点击右上角的购物车，将购物里的图标添加到项目中。3、点击添加项目就会有选择的项目，选择后保存。1、首先将需要的图标加入购物车。6、使用iconfont图标。
【react】react项目修改浏览器图标
bbt953的博客
03-30 1505
react项目修改浏览器图标
react 中使用iconfont
weixin_33726943的博客
11-16 824
大前提是已经在iconfont有项目，并且有选中的图标一、选择新建项目二、搜索目标图标--并添加到购物车三、在购物车中将图标添加到项目四、出现三种类型，UnicodeFont classSymbo选中需要使用的类型，并生成相应的css，或者js代码将生成的代码在浏览器中打开，复制然后写入单独的css文件或者js文件。五、将js或者css文件（这里以js为例子）引入到项目中六、在项目中使用，这里是在...
React中如何使用icon图标
y_l33的博客
01-09 905
React如何使用icon图标
react页面使用iconfont
05-24
要在React页面中使用Iconfont，您需要完成以下步骤： 1.在您的React项目中安装Iconfont的CSS库和字体文件。 2.导入所需的Iconfont图标。您可以在Iconfont网站上选择所需的图标，然后将其添加到购物车中并下载。 3.在React组件中引用所需的图标。您可以使用Unicode字符或CSS类名来引用它们。 例如，以下是一个简单的React组件，它使用了一个名为"icon-home"的Iconfont图标： ```js import React from "react"; import "./iconfont.css"; const HomeIcon = () => { return ( <div> <i className="iconfont icon-home"></i> </div> ); }; export default HomeIcon; ``` 在这个例子中，我们首先导入Iconfont的CSS文件，并在组件中使用CSS类名"icon-home"来引用所需的图标。最后，我们将这个图标包装在一个<div>元素中并将其导出为一个组件。 希望这可以帮助您在React项目中使用Iconfont图标！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值