React实战——使用iconfont

最新推荐文章于 2025-10-10 20:30:00 发布

原创

最新推荐文章于 2025-10-10 20:30:00 发布 · 784 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍了如何在React项目中集成和使用Iconfont图标。首先从iconfont官网下载所需的图标，然后精简下载包，只保留必要的文件，将iconfont.css转换为iconfont.js并全局引用。最后，在组件中引入并使用这些图标。

1、下载需要的iconfont

iconfont官网
把需要的iconfont添加至项目，并下载

2、精简下载包

建立文件夹 ./static/iconfont
把下载包解压到上面的文件夹中，并留下有用的文件
把 iconfont.css 改名为iconfont.js，并全局引用
- 注：把 @font-face 里面的 iconfont开头的前面加上相对路径 ./
- 把下面伪选择器的那些删了

import {
   
    createGlobalStyle } from 'styled-components'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木厶

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React Native学习资源汇总

xiangzhihong8的专栏

08-01

2694

目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter

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

Handsome_gir的博客

12-12

899

如果有项目可以直接选择需要添加的项目，没有的需要新建项目存放到项目中。5、在react项目中，打开public/index.html。4、确定之后进入我的项目中，选择Symbol，点击复制代码。2、点击右上角的购物车，将购物里的图标添加到项目中。3、点击添加项目就会有选择的项目，选择后保存。1、首先将需要的图标加入购物车。6、使用iconfont图标。

参与评论您还未登录，请先登录后发表或查看评论

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

qq_35536883的博客

07-16

4939

Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...

react项目如何使用iconfont的方法步骤

10-17

主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

项目中使用 iconfont

小秀的博客

05-08

706

将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。

在react中使用iconfont

MFWSCQ的博客

10-31

6387

一、基本使用我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...

React Native矢量图标全攻略：从入门到自定义iconfont的高级玩法

老猿阿浪的博客

05-14

1494

当我第一次发现同事的APP安装包比我的小了2.3MB，仅仅是因为他正确使用了react-native-vector-icons时，整个团队的认知都被刷新了。本文将带你深入这个被低估的神器，揭秘如何用专业玩家的姿势玩转React Native图标系统，包括那个让无数人头疼的自定义iconfont终极解决方案

ReactNative开发实战——ReactNative 开发中的图标管理方案：基于 Iconfont 的自定义图标库实现

最新发布

断线的风筝

10-10

1028

React Native 应用开发中，采用 Iconfont 方案管理业务图标具有显著优势。该方案通过矢量特性实现多分辨率适配，支持动态颜色调整，且体积小巧。实现步骤包括：1) 在 Iconfont 官网创建项目并生成字体文件；2) 编写自动下载脚本生成 TypeScript 定义；3) 封装可复用的图标组件，支持动态大小和颜色配置。该方案解决了移动端图标管理的核心问题，包括渲染性能、包体积优化和跨平台一致性，相比传统图片方案更高效易维护。

React Native告别图标体积大手动更换慢的噩梦：让图标更新像修改文字一样简单

老猿阿浪的博客

05-13

2172

React Native告别传统图标体积大、手动更换慢、效率低的噩梦，用react-native-iconfont-cli实现一键更换、体积小、效率高的问题

react 使用iconfont 图标

一起学习前端知识，一起成为前端开发工程师！

10-12

2745

复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！

react-iconfonts:一个React来智能地使用iconfont的项目

05-28

react-iconfonts 一个React智能地使用Iconfont的项目安装 $ npm i -S react-iconfonts import IconFont from 'react-iconfonts' 图标字体将您的图标（SVG）上传到您创建的图标项目，然后从 download.zip ，解压缩download.zip 。字体类将iconfont.css添加到您的项目 // Import css import './iconfont.css' 符号，Svg 将iconfont.js添加到您的项目 // import js import './iconfont.js' 警告：如果有什么不对的iconfont.js因为Eslint ，这个注释添加到第一线iconfont.js ： // eslint-disable-next-line no-unused-ex

iconfont在react中的使用

lesswenniang的博客

04-23

317

https://www.cnblogs.com/qdjj/p/12420541.html

react 中使用iconfont

weixin_33726943的博客

11-16

897

大前提是已经在iconfont有项目，并且有选中的图标一、选择新建项目二、搜索目标图标--并添加到购物车三、在购物车中将图标添加到项目四、出现三种类型，UnicodeFont classSymbo选中需要使用的类型，并生成相应的css，或者js代码将生成的代码在浏览器中打开，复制然后写入单独的css文件或者js文件。五、将js或者css文件（这里以js为例子）引入到项目中六、在项目中使用，这里是在...

React中在组件在引入iconfont(第三方js)

我的专栏

06-22

556

最近玩腾讯连连的，打算使用iconfont上面的图标，由于没有index.html导致无法引入js。解决方法如下：在App模板下面增加： //加载js var script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = '//at.alicdn.com/t/font_2624852_1vuu69zd0vl.j

react 中 iconfont 简单使用

mhbsoft的博客

04-20

1277

项目文件夹下新建iconfont 文件夹目录下载的iconfont解压到项目 iconfont文件夹目录下面 index.html 中引入 css文件 <link rel="stylesheet" href="./iconfont/iconfont.css"> 代码中如下使用： <span className="icon iconfont">&...

react使用iconfont

喜兴

01-13

763

react使用iconfont 1.下载iconfont 文件 2.在react的入口文件 index.jsx 或者 app.jsx添加引入 index.jsx + import '../src/assets/iconfont/iconfont.css'; 3.在这里插入代码片 unicode: <i className="iconfont"><...

react 使用 iconfont

weixin_30781433的博客

08-05

334

【react】---react项目中如何使用iconfont 转载：https://www.cnblogs.com/nanianqiming/p/11273603.html Alley巷子注意：页面上不能显示字体图片了，而是直接显示字体编码原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "" 改为 “\ue655” ...

React 使用iconfont

weixin_44240581的博客

03-28

185

选中适合的图标加入购物车打开购物车下载解压在src下新建，static/font 文件夹，把上面选中的文件全部复制进去在需要的页面使用 import '../../static/font/iconfont.css'; export default const Xpage = (props) => { return ( <div> <i className="iconfont icon-location" /> </div&gt.

react+antd中使用iconfont symbol模式

ch071714301的专栏

07-29

1101

阿里妈妈iconfont，使用symbol 新建组件iconfont 具体页面中引入组件： importIconFontfrom'./../../components/icon-font'; 使用组件： <IconFonttype="iconadd"style={{fontSize:'20px',color:'#666'}}/> ...