react项目如何使用iconfont的方法步骤


Posted in Javascript onMarch 13, 2019

项目中通常会使用iconfont作为图标显示的解决方案,这里介绍下如何在项目中配置。

准备工作

首先配置好项目,关键需要注意FontClass/Symbol 前缀Font Family两个配置。

react项目如何使用iconfont的方法步骤

当我们配置好项目之后,就可以导出样式文件,复制如下图中的css链接中的内容备用。

react项目如何使用iconfont的方法步骤

正餐开始

创建Icon.js文件。

import React from 'react';
import classNames from 'classnames';
import './iconfont.less';

// 上文中从iconfont中复制的css文件内容
import './icon.css';

const Icons = (props) => {
 const {type, spin, className = '', ...others} = props;

 const cls = classNames({
  'unovo-iconfont': true,
  [`unovo-iconfont-${type}`]: true,
  'unovo-iconfont-spin': !!spin,
 }, className);

 return (
  <i className={cls} {...others}/>
 );
};

export default Icons;

创建iconfont.less

@keyframes icon-spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

@iconfont-css-prefix: unovo-iconfont;

.@{iconfont-css-prefix}-spin:before {
 display: inline-block;
 animation: icon-spin infinite 1s linear;
}

然后这样使用

<Icons type={type} spin />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 #jQuery
深入Node TCP模块的理解
Mar 13 #Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 #Javascript
vue计算属性computed的使用方法示例
Mar 13 #Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 #Javascript
vue生命周期与钩子函数简单示例
Mar 13 #Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
促销活动计划书
2014/05/02 职场文书
优秀毕业生求职信
2014/06/05 职场文书
植物生产学专业求职信
2014/08/08 职场文书
端午节活动总结
2014/08/26 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
理解python中装饰器的作用
2021/07/21 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL