react項目如何使用iconfont

項目中一般會使用 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 />