React ts 引入iconfont图标方法以及注意事项

最新推荐文章于 2024-05-08 14:31:42 发布
原创 最新推荐文章于 2024-05-08 14:31:42 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端 #typescript #vue

本文介绍了如何在React TypeScript项目中引入和使用Iconfont图标，包括从iconfont官网下载资源并放入项目public目录，以及在index.html中引入样式。当遇到引入后页面不生效的问题时，提供了在.stylelintignore中忽略iconfont.css文件和在index.tsx中引入的解决方案。

react + ts + and 引入在线iconfont字体图标

1. 下载iconfont压缩包

  • iconfont官网，资源管理进入我的项目
    在这里插入图片描述

  • 点击Font class，点击下载至本地
    在这里插入图片描述

  • 解压后，放到自己的项目中，根目录public

  • 在这里插入图片描述

2. 引入项目中及使用

  • 在index.html中将iconfont.css引入
    在这里插入图片描述
  • 页面中使用类名方式：
<i className="iconfont icon-ego-menu" />

注：此项目中使用ts，stylelint预处理的css（以下仅供参考）
在这里插入图片描述
问题：在index.html中引入后，页面不生效
解决方案：

  1. 在.stylelintignore 忽略iconfont.css文件。
    在这里插入图片描述
  2. 在index.tsx中引入iconfont.css
    在这里插入图片描述
  3. 同样在页面中使用类名方式：
<i className="iconfont icon-ego-menu" />
React实战——使用iconfont
weixin_43848532的博客
04-16 797
1、下载需要的iconfont iconfont官网 把需要的iconfont添加至项目，并下载 2、精简下载包 建立文件夹 ./static/iconfont 把下载包解压到上面的文件夹中， 并留下有用的文件 把 iconfont.css 改名为iconfont.js，并全局引用 注：把 @font-face 里面的 iconfont开头的 前面加上相对路径 ./ 把下面伪选择器的...
React 实战 | react项目使用图标iconfont
qq_35536883的博客
07-16 4943
Iconfont平台 iconfont平台是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 如何引入React项目中 1.打开Iconfont官网，进入项目页面 ## 1.点击》下载至本地》解压文件夹 3.在项目src文件夹下创建static文件...
react引入iconfont的svg图标
qq_23858785的博客
04-23 1000
react引入iconfont的svg图标
在react中使用iconfont
MFWSCQ的博客
10-31 6395
一、基本使用 我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...
项目中使用 iconfont
小秀的博客
05-08 726
将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
react-iconfont-cli 用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
react项目如何使用iconfont的方法步骤
12-08
在React项目中集成Iconfont图标库，可以提升项目的可维护性和图标的一致性。下面将详细阐述这个过程，包括配置项目、创建组件以及使用图标。 ### 配置项目 1. **选择图标类型**：Iconfont 提供了两种使用方式，...
React中使用iconfont的svg图标
小火车况且况且况且的博客
09-08 1366
React中使用iconfont的svg图标 1. 选择iconfont字体图标，并且导入到项目中 选择symbol类型 点击或者复制地址，页面进行跳转，复制页面中的代码 项目中新建一个文件，用来存放复制的代码 之后在项目的入口文件index.jsx导入 // 引入 svg 的字体图标 import "@/assets/styles/iconfont-svg" ...
react 使用iconfont 图标
一起学习前端知识，一起成为前端开发工程师！
10-12 2767
复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！
react项目中如何引入iconfont图标
benbihuwang的博客
12-19 963
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
weixin_30781433的博客
08-05 336
【react】---react项目中如何使用iconfont 转载 ：https://www.cnblogs.com/nanianqiming/p/11273603.html Alley巷子 注意： 页面上不能显示字体图片了，而是直接显示字体编码 原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "&#xe655;" 改为 “\ue655” ...
react使用iconfont
喜兴
01-13 767
react使用iconfont 1.下载iconfont 文件 2.在react的入口文件 index.jsx 或者 app.jsx添加 引入 index.jsx + import '../src/assets/iconfont/iconfont.css'; 3.在这里插入代码片 unicode: <i className="iconfont">&#xe72e;<...
iconfont在react中的使用
lesswenniang的博客
04-23 321
https://www.cnblogs.com/qdjj/p/12420541.html
react项目中使用iconfont字体图标
bidang3275的博客
05-21 3885
1. 复制iconfont字体图标文件到项目中 2. 在index.js项目入口文件中引入inconfont.css文件 3. 使用iconfont方式：正常使用即可 # 实体方式：需要加iconfont样式基类 <i className="iconfont">&#xe60f;</i> # 类方式：除了加iconfont样式基类外，还需要加对应的图标样式类名 <i className="iconfont icon-chufang"></i>
react + antd 引入iconfont 图标
m0_59148573的博客
03-29 971
打开iconfont.js文件，在第一行添加。
react 中 iconfont 简单使用
mhbsoft的博客
04-20 1282
项目文件夹下新建iconfont 文件夹目录 下载的iconfont解压到 项目 iconfont文件夹目录下面 index.html 中引入 css文件 <link rel="stylesheet" href="./iconfont/iconfont.css"> 代码中如下使用： <span className="icon iconfont">&#xe6cf;&...
阿里iconfont在vue，react中引用及使用
weixin_43844440的博客
12-08 403
阿里iconfont在vue，react中引用及使用 1.下载下来所需要的icon，解压后得到文件： 2.将文件放到项目里面： 在react.js里面： 在public里面新建一个文件夹iconfont(无要求)，将文件放进去 在index.html中引用 <link rel="stylesheet" href="./iconfont/iconfont.css" /> 如果不是本地运行，可以全局配置PUBLIC_URL <link rel="manifest" href="%PUBL
再react6Ts中引入iconfont图标
最新发布
12-30
### 在 React TypeScript 项目中引入并使用 Iconfont 图标 #### 准备工作 为了在React TypeScript项目中成功引入Iconfont图标，需先访问[iconfont官网](https://www.iconfont.cn/)下载所需的图标集合压缩包[^2]。 #### 修改配置文件 接着，在项目的`config/defaultSetting.ts`文件里添加对解压后的`iconfont.js`文件的相对路径引用[^1]： ```typescript // config/defaultSetting.ts import './path/to/iconfont'; // 替换为实际路径 ``` #### 使用图标组件 创建一个新的React组件来加载和展示这些图标。下面是一个简单的例子说明如何定义一个可重用的图标组件： ```tsx // components/IconFontComponent.tsx import React from 'react'; interface Props { type: string; } const IconFontComponent: React.FC<Props> = ({type}) => ( <i className={`iconfont ${type}`} /> ); export default IconFontComponent; ``` 此代码片段展示了怎样利用传入属性(`props`)动态设置类名从而显示不同的图标样式[^3]。 #### 实际应用案例 最后一步是在具体的应用场景下调用这个自定义的图标组件。例如在一个按钮上添加特定样式的图标作为装饰或指示功能用途： ```tsx // App.tsx 或其他业务逻辑层文件 import React from 'react'; import IconFontComponent from './components/IconFontComponent'; function ExampleButton() { return ( <button> <IconFontComponent type="icon-example" /> Click Me! </button> ); } ``` 上述过程涵盖了从准备阶段直到最终部署使用的全部流程，确保了TypeScript环境下能够顺利集成来自Iconfont平台上的矢量图形资源[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值