介绍
小编给大家分享一下反应项目中iconfont的使用案例,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
项目中通常会使用<代码> iconfont> 代码作为图标显示的解决方案,这里介绍下如何在项目中配置。
<强>准备工作强>
首先配置好项目,关键需要注意<代码> FontClass/符号前缀代码>和<代码>字体> 代码两个配置。
当我们配置好项目之后,就可以导出样式文件,复制如下图中的css代码> <代码>链接中的内容备用。
<强>正餐开始强>
创建<代码>图标。js代码>文件。
import React 得到& # 39;反应# 39;; import classNames 得到& # 39;一会# 39;; import & # 39;。/iconfont.less& # 39;;//,上文中从iconfont中复制的css文件内容 import & # 39;。/icon.css& # 39;; const Icons =,(道具),=祝辞,{ {,const 旋转,类型,还以为;className =, & # 39; & # 39;,,别人……},=,道具; ,const cls ({=,类名 & # 39;才能unovo-iconfont& # 39;:,真的, ,,(“unovo-iconfont - ${类型}”):,真的, & # 39;才能unovo-iconfont-spin& # 39;:, ! !旋转, ,},类名); ,return ( & lt;才能小姐:className={cls},{…}其他人/比; ,); }; export default 图标;
创建<代码> iconfont。代码>。
@keyframes icon-spin { ,得到{ 变换才能:旋转(0度); ,} ,用{ 变换才能:旋转(360度); ,} } @iconfont-css-prefix: unovo-iconfont; .@ {iconfont-css-prefix}旋转:before { ,显示:inline-block; 动画:大敌;icon-spin infinite 1 s 线性; }
然后这样使用
, & lt; Icons type={类型},spin /祝辞
看完了这篇文章,相信你对“反应项目中iconfont的使用案例”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!