1.动态调用

一、引用到路由中

注意，不要错误引用到.css链接，正确的是symbol下的js链接！（血的教训）

复制链接后，打开项目中的config->defaultSetting.ts

将复制好的链接粘贴到iconfontUrl中。

之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！

二、引用到页面中

在项目中的 src->component 下新建文件夹，名字可自己取

文件夹下新建一个index.jsx文件，文件内容如图所示。


import { createFromIconfontCN } from "@ant-design/icons";// 使用：// import IconFont from '@/components/IconFont';*// *let NewIconFont = createFromIconfontCN({ scriptUrl: 'https://at.alicdn.com/t/c/font_3481009_bylhrlvnk5o.css' });export default NewIconFont;

注意，这边放的是文件引用过来的.css文件，不是js文件

页面引用，后可直接使用到需要放置的地方

2.静态调用

通过将iconfont中的项目（所有iconfont）下载到本地，再引用也可以的实现。

下载后，将文件解压，放在项目中的public文件夹下即可。

再打开项目中的config->defaultSetting.ts引入对应iconfont.js的相对路径

路由中使用：

页面中调用与动态引用一样。

react 使用iconfont 图标相关推荐

react 关于iconfont图标应用和动态图标
问题开发的时候遇到了antd的icon无法使用的问题,百度无果,改用iconfont.又遇到了图标静态不知如何旋转的问题,百度后发现用css修改即可. 解决方法 1. 首先把要用的图标拉入iconf ...
react项目Menu菜单栏、iconfont图标引用
1.操作步骤阿里矢量图标网站将图标加入购物车添加至项目选择Symbol方式引入,复制代码 2.react 引用 iconFont import { createFromIconfontCN } ...
react使用字体图标iconfont
react使用字体图标iconfont 第一步,进入到iconfont官网,选择图标管理进入我的项目,点击右上角的+号创建自己的项目: 创建完项目后可以去搜索自己想要的的图标,然后点击添加至购物车: ...
Swift使用iconfont图标
iconfont怎么在iOS中使用了什么是iconfont? 简而言之就是将图标用文字(通过编码)字体的形式显示. 优点:减少项目体积包, 减少切2倍图和3倍图 , 各设备显示效果都不错, 可 ...
前端知识：如何创建自己的Iconfont图标库
在日常的开发过程中,前端页面经常会引用一些图标,iconfont图标库是前端开发者非常友好的在线字体图标库.大家可以根据平常所涉及的项目,收藏自己需要的图标库,方便在后续的项目中使用,今天小编给大家介 ...
WPF 如何将IconFont图标转成Geometry
之前每次使用IconFont图标,都要去下载一个png图片,每次颜色什么的改了,都要重新下载,太苦逼了. 现在好了,终于找到如何方便快速地使用IconFont图标了. 是应该的演示如何从IconFon ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...

react 使用iconfont 图标

1.动态调用

一、引用到路由中

二、引用到页面中

2.静态调用

react 使用iconfont 图标相关推荐

最新文章

热门文章