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困惑—包装集 DOM节点
Oct 16 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jQuery实现跨域
Feb 03 Javascript
javascript求日期差的方法
Mar 02 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
字节飞书面试promise.all实现示例
Jun 16 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将数据导入到Foxmail
2006/10/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python pickle模块用法实例
2015/04/14 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
年度考核自我鉴定
2014/03/19 职场文书
班级团队活动方案
2014/08/14 职场文书
初三毕业评语
2014/12/26 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Pygame Event事件模块的详细示例
2021/11/17 Python