欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-04-10 08:52:00|栏目:JavaScript代码|点击:

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

准备工作

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

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

正餐开始

创建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 />

上一篇:js运算符的一些特殊用法

栏    目:JavaScript代码

下一篇:js正则表达式中test,exec,match方法的区别说明

本文标题:react项目如何使用iconfont的方法步骤

本文地址:http://www.codeinn.net/misctech/98337.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有