react引入阿里字体图标iconfont

最新推荐文章于 2025-06-05 15:21:41 发布
转载 最新推荐文章于 2025-06-05 15:21:41 发布 · 2.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000016639485
文章标签：

#javascript #ViewUI

本文介绍如何在移动端开发中使用阿里字体图标，详细步骤包括从阿里巴巴矢量图网站下载图标，到在React项目中引入和使用这些图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

移动端开发过程中，字体图标几乎是不可缺的，本文将介绍如何使用阿里字体图标，已方便练手的时候使用。

第一步：制作字体图标

1、首先进入阿里巴巴矢量图网站：http://www.iconfont.cn/
2、通过搜索需要的图片的关键字搜索图标，如"购物车"

clipboard.png

点击回车键，选择自己喜欢的图标，添加入库，点击右上角的购物车图标，如下如

clipboard.png

点击"下载代码",将子图图标下载到本地电脑并进行解压。

第二步：react项目中使用该字体图标

1、在react项目的public文件夹下面创建iconfont文件夹，将如下文件放到iconfont文件夹下：

clipboard.png

2、在public文件夹下的index.html引入iconfont.css，如

    <link rel="stylesheet" href="./iconfont/iconfont.css">
    
3、使用如下即可

    <i className="icon icon-qq"></i>
如何在react项目中使用阿里iconfont字体库的svg图标
AboyL的博客
04-01 1万+
阿里的iconfont字体库是一个拥有很多字体图标资源的字体库，我们可以看到里面有很多的多彩图标。但是传统的classname方法跟unicode方法都没有办法支持多彩字体库。只有svg格式的图片才支持。我们怎么才能使用这个呢？首先我们将字体图标加入项目以后，在我的项目中会有三份代码生成。这个时候我们把把Symbol的代码复制，然后粘贴到了我们自己在项目中新建的font.js文件中就好了。随后我们...
react native 使用图标字体(IconFont)
sharpdeng的博客
05-17 3091
前言 今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。 正文 图标字体（IconFont） IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看 解密Ic...
react项目如何使用iconfont的方法步骤
10-17
主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 中引入字体图标
qq_40924034的博客
12-10 718
【react+antd+vite】优雅的引入svg和阿里巴巴图标
最新发布
最是人间留不住，朱颜辞镜花辞树。
06-05 593
由于是vite项目，要安装svger来帮助svg文件引入进来，否则会失败npm下载包。
react Native项目中 使用Fontello自定义字体图标库
weixin_43737733的博客
08-15 540
点击选中你需要的图标点击下载生成zip文件解压文件，将解压后文件中的ttf格式文件方法项目根目录的assets/fonts文件夹，没有则自己创建将解压后文件中的config.json 放入你的项目中在项目根目录下创建一个文件，‌用于指定自定义字体文件的路径assets: ['./assets/fonts/'], //你的ttf文件存放路径使用 react-native link （确保react-native环境已配置成功）
在react中使用字体图标
mengweizhao的博客
11-13 870
npm install --save react-fontawesome npm install font-awesome import ‘font-awesome/less/font-awesome.less’; import ‘react-fontawesome’; 然后使用
React 在antd项目中引用阿里巴巴字符体
weixin_38694789的博客
12-24 588
在antd项目中遇到要用阿里巴巴的字符体，下面是简单介绍怎么引用： scriptUrl地址是iconfont.cn项目在线生成的js地址，下面说说如何生成js地址： 1、现在阿里巴巴图标官网选图标，然后加入购物车 2、选添加进项目，如果没有项目就新建项目，按确定： 3、然后跳到图标管理的页面，如下： 4、将这些图标下载至本地： 5、然后点击上传图标至项目： ...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
React Native 自定义字体图标
02-23
在React Native应用开发中，有时候我们可能需要使用自定义的字体图标来替代默认的...通过这种方式，你可以根据需要引入任何自定义字体图标库，为你的应用增添更多视觉魅力。记得根据实际项目结构和需求进行适当的调整。
React 实战 | react项目使用图标iconfont
qq_35536883的博客
07-16 4914
Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...
react项目里如何使用阿里字体图标
kilig
04-22 514
C程序结构 ： 一个C程序是由若干头文件和函数组成，如下例就是一个头文件和一个主函数组成。 #include <stdio.h> int main() { printf("Hello World!"); return 0; } ①stdio.h是系统提供的一个文件名,stdio是“standard input & output”的缩写，即标准输入输出;函数就是实现代码逻辑的一个小的单元。 ②主函数： 一个C程序函数有且只有一个主函数，即main函数。C程序就是执行主函
React： ----本地引入iconfont字体样式（iconfont.css）导致警告
weixin_30564785的博客
03-11 705
如上图为警告提示， 解决办法： 不要在index.html文件中引入该字体样式，从index.css样式文件中引入。 错误： 正确： 转载于:https://www.cnblogs.com/chenmoumou/p/10511718.html...
react 使用 Font Awesome 字体图标
qq_43136493的博客
09-05 1014
react 使用 Font Awesome 字体图标 npm i –save @fortawesome/fontawesome-svg-core@prerelease npm i –save @fortawesome/free-solid-svg-icons@prerelease npm i –save @fortawesome/react-fontawesome@prerelease ...
【React】前端项目引入阿里图标
m0_61049675的博客
01-30 1541
注意：你的icon名字 icon-sousuokuang为图片红框部分。
React使用iconfont阿里巴巴矢量图库
qq_45634989的博客
11-14 1319
React使用iconfont阿里巴巴矢量图库
引用阿里巴巴（iconfont）字体图标
like_jack的博客
06-21 494
这是字体图标库的地址阿里巴巴 进入之后搜索要使用的图标，将鼠标移到上面点击购物车，收藏，然后创建一个项目，将其添加到项目中； 最好一次讲所有的项目所需图标一次性下载，且要保留项目，不要随意删改，一遍项目更新迭代时再用； 用了这三个文件，把他们放到项目里的一个文件夹内，然后引用iconfont.css到要使用的页面中；下面的是从阿里巴巴下载的已经收藏好的文件夹，里面的红色箭头已经指出具体的使用方法；
react使用字体图标iconfont
xiaocn325的博客
11-21 1409
react使用字体图标iconfont 第一步，进入到iconfont官网，选择图标管理进入我的项目，点击右上角的+号创建自己的项目； 创建完项目后可以去搜索自己想要的的图标，然后点击添加至购物车； 点击左上角的购物车就可以看见自己的图标，然后点击将图标加入自己的项目。 到我的项目下载图标至本地并解压，选择其中这几个文件 将这几个文件放到自己项目中的statics文件夹中，打开ico...
react中引入图标和背景图片
热门推荐
boysky0015的博客
09-20 1万+
首先引入想要的图片，请看上面的目录 import homebackground from '../../assets/images/homebackground2x.png'; const homeImage = { backgroundSize: '100% 100%', //记得这里100% background: `url(${ homeImage })`, //或者下
react tsx 阿里矢量图标使用
01-03
### 如何在 React TSX 项目中使用阿里矢量图标 为了在 React TypeScript (TSX) 项目中集成和使用阿里矢量图标，可以遵循如下方法： #### 安装依赖包 首先需要安装 `@ant-design/icons` 和其他必要的依赖项来支持阿里云矢量图标的显示。 ```bash npm install @ant-design/icons antd ``` 或者如果偏好 Yarn: ```bash yarn add @ant-design/icons antd ``` 这一步骤确保了能够访问到 Ant Design 提供的一系列高质量组件以及其内置的图标集合[^1]。 #### 导入所需模块 接着，在项目的入口文件或特定页面内导入所需的图标。假设要加载名为 `AliIconName` 的自定义阿里矢量图标，则可以在代码顶部加入这样的语句： ```typescript import { createFromIconfont } from '@ant-design/icons'; // 假设这是来自阿里妈妈iconfont平台的一个链接 const AliIcon = createFromIconfont('http://at.alicdn.com/t/font_XXXXXX.js'); ``` 请注意这里的 URL 是指向阿里妈妈 iconfont 平台上的字体文件路径，需替换为实际使用的图标集URL[^2]。 #### 使用图标组件 最后就可以像常规 JSX 组件一样去渲染这些图标了。下面是一个简单的例子展示如何在一个按钮旁边放置一个阿里矢量图标： ```tsx import React from 'react'; import Button from 'antd/es/button'; // 或者 import {Button} from "antd"; import './App.css'; function App() { return ( <div className="App"> {/* 渲染带有阿里的矢量图标的按钮 */} <Button type="primary" shape="round" icon={<AliIcon />}> Click Me With Icon </Button> </div> ); } export default App; ``` 通过上述步骤即可成功地将阿里矢量图标引入至 React TSX 工程当中，并实现美观且功能丰富的界面设计[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值