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 相关文章推荐
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
React配置子路由的实现
Jun 03 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扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
八一建军节感言
2014/02/28 职场文书
小学生寒假家长评语
2014/04/16 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
学习十八大宣传标语
2014/10/09 职场文书
车辆年检委托书范本
2014/10/14 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2019银行竞聘书
2019/06/21 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang