react項目中iconfont的使用案例

小編給大家分享一下react項目中iconfont的使用案例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

項目中通常會使用iconfont作為圖標(biāo)顯示的解決方案，這里介紹下如何在項目中配置。

準(zhǔn)備工作

首先配置好項目，關(guān)鍵需要注意FontClass/Symbol 前綴和Font Family兩個配置。

當(dāng)我們配置好項目之后，就可以導(dǎo)出樣式文件，復(fù)制如下圖中的css鏈接中的內(nèi)容備用。

正餐開始

創(chuàng)建Icon.js文件。

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

// 上文中從iconfont中復(fù)制的css文件內(nèi)容
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;

創(chuàng)建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 />

看完了這篇文章，相信你對“react項目中iconfont的使用案例”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！