react+antd中使用iconfont symbol模式

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

#react

本文介绍如何在项目中使用阿里妈妈的IconFont图标库，并通过Symbol方式导入图标。具体步骤包括新建IconFont组件，以及在页面中引入并使用该组件。

 

阿里妈妈iconfont，使用symbol

新建组件iconfont

具体页面中引入组件：

import IconFont from './../../components/icon-font';

使用组件：

<IconFont type="iconadd" style={{ fontSize: '20px', color: '#666' }} />

 

React实战——使用iconfont
weixin_43848532的博客
04-16 793
1、下载需要的iconfont iconfont官网 把需要的iconfont添加至项目，并下载 2、精简下载包 建立文件夹 ./static/iconfont 把下载包解压到上面的文件夹中， 并留下有用的文件 把 iconfont.css 改名为iconfont.js，并全局引用 注：把 @font-face 里面的 iconfont开头的 前面加上相对路径 ./ 把下面伪选择器的...
把 iconfont 的图标下载到 React 项目中使用
最新发布
weixin_48191864的博客
07-03 809
如果使用发现图标自带颜色，那么是因为图标本身是有颜色的，那么在通过 symbol 获取图标时会在 svg 的path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要重新添加该图标(无色的图标)，两种方式修复这个问题 1）获取在 symbol 的 js 文件中程序删除 fill 属性，打开对应 js 文件，全局搜索 fill，删除对应的代码（代码示例：fill="#181818"） 2）去 iconfont 去色后生成新的 js 文件，使用新的 js 文件，3）点击购物车，添加到项目。
在react中使用iconfont
MFWSCQ的博客
10-31 6394
一、基本使用 我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...
react 中使用iconfont
weixin_33726943的博客
11-16 901
大前提是已经在iconfont有项目，并且有选中的图标一、选择新建项目二、搜索目标图标--并添加到购物车三、在购物车中将图标添加到项目四、出现三种类型，UnicodeFont classSymbo选中需要使用的类型，并生成相应的css，或者js代码将生成的代码在浏览器中打开，复制然后写入单独的css文件或者js文件。五、将js或者css文件（这里以js为例子）引入到项目中六、在项目中使用，这里是在...
react 使用iconfont 图标
一起学习前端知识，一起成为前端开发工程师！
10-12 2767
复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
精选资源
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
精选资源
react+antd+redux实现的一个超全后台管理系统
10-12
React Router是React社区广泛使用的路由库，它可以实现动态路由配置。结合Redux，我们可以创建一个中间件来处理用户登录状态，从而决定哪些路由可以访问，哪些需要权限验证。 5. **提炼业务模型与功能组件** 基于...
React+antd后台管理系统模板
12-01
React+antd后台管理系统模板是一个利用React前端框架和antd UI库构建的管理界面示例项目。这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让...
精选资源
react-admin：React + AntD后台管理系统解决方案
02-05
欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-app创建的，主要还是列...
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
小秀的博客
05-08 724
将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。
iconfont在react中的使用
lesswenniang的博客
04-23 321
https://www.cnblogs.com/qdjj/p/12420541.html
【React】在移动端使用iconfont图标库
Handsome_gir的博客
12-12 907
如果有项目可以直接选择需要添加的项目，没有的需要新建项目存放到项目中。5、在react项目中，打开public/index.html。4、确定之后进入我的项目中，选择Symbol，点击复制代码。2、点击右上角的购物车，将购物里的图标添加到项目中。3、点击添加项目就会有选择的项目，选择后保存。1、首先将需要的图标加入购物车。6、使用iconfont图标。
react 使用 iconfont Symbol的心得(下载到本地)
weixin_44247693的博客
12-25 1260
1.离线使用symbol 1.下载之后将iconfont文件放到src里面的单独目录里面，要引用图标的js文件记得导入iconfont.css文件 不要加iconfont.js 2…iconfont.js文件单独放到public文件夹，放src里不认识他，然后在index.html中添加引用 2.1 放到public文件夹 2.2 index.html中添加引用 3.相应位置使用svg <svg class="icon" aria-hidden="true" style={{ width: 3
icon大全--react中使用icon图标之Iconfont-阿里巴巴矢量图标库使用方法
初心 - 杨瑞超个人博客
01-02 5326
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 1、进入官网 https://www.iconfont.cn/ 2、登录 阿里员工可以使用阿里域账号噢~ 3、图标管理–我的项目 4、新建项目 填写好之后可看到新建的项目： 5、搜索 在搜索框输入语义化关键字即可，例如：“搜索”，搜索结果如下图 ...
iconfont 在react中使用步骤详解
jjw_zyfx的博客
05-31 1230
React 使用iconfont
weixin_44240581的博客
03-28 188
选中适合的图标加入购物车 打开购物车 下载 解压 在src下新建，static/font 文件夹，把上面选中的文件全部复制进去 在需要的页面使用 import '../../static/font/iconfont.css'; export default const Xpage = (props) => { return ( <div> <i className="iconfont icon-location" /> </div&gt.
react 使用 iconfont
weixin_30781433的博客
08-05 336
【react】---react项目中如何使用iconfont 转载 ：https://www.cnblogs.com/nanianqiming/p/11273603.html Alley巷子 注意： 页面上不能显示字体图片了，而是直接显示字体编码 原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话,只要将 "&#xe655;" 改为 “\ue655” ...
React+antd打造简易后台管理系统模板
资源摘要信息: "React+antd后台管理系统模板是一个基于React框架和antd UI组件库开发的后台管理系统的模板。antd是Ant Design的React实现，它是一套企业级的UI设计语言和React组件库，由阿里巴巴的Ant Design团队...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值