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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
使用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设计模式 Template (模板模式)
2011/06/26 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
javascript 写类方式之十
2009/07/05 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
vue实现文字加密功能
2019/09/27 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
python语言使用技巧分享
2016/05/31 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python数据集切分实例
2018/12/08 Python
python global关键字的用法详解
2019/09/05 Python
Python连接字符串过程详解
2020/01/06 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
django 多数据库及分库实现方式
2020/04/01 Python
python Selenium 库的使用技巧
2020/10/16 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
质量月活动策划方案
2014/03/10 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
法定代表人免职证明
2015/06/24 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android