react-fontawesome是一个成熟的第三方图标库,底层采用svg的方式实现，在使用时引入想要使用的图标即可，相比于icon-font的图标方式，他不必一次性引入全部图标

安装（建议这三个库都要安装）

nmp:

npm i --save @fortawesome/fontawesome-svg-core 
             @fortawesome/free-solid-svg-icons 
             @fortawesome/react-fontawesome

yarn:

yarn add @fortawesome/fontawesome-svg-core 
         @fortawesome/free-solid-svg-icons 
         @fortawesome/react-fontawesome

1.简单使用

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} size='9x'/>

ReactDOM.render(element, document.body)

效果

2.进一步封装（typescript）

import React from 'react';
import classNames from 'classnames';
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';

export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';

export interface IconProps extends FontAwesomeIconProps {
    theme?: ThemeProps;
}

const Icon: React.FC<IconProps> = (props) => {
    const { className, theme, ...restProps } = props;

    // 根据 theme 的不同，添加不同的 className
    const classes = classNames('fun-icon', className, {
        [`icon-${theme}`]: theme,
    })

    return <FontAwesomeIcon className={classes} {...restProps}/>
}

export default Icon;

给 <FontAwesomeIcon /> 组件进一步封装，比如在这里，根据主题theme 的不同，添加不同的类名，然后根据不同的类名添加不同的样式，如颜色等，这样我们就可以给这些图标添加上我们想要的效果

$theme-colors: 
(
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

@each $key, $val in $theme-colors {
    .icon-#{$key} {
        color: $val;
    } 
}

这里使用了 scss 的 @each 给不同图标添加不同的颜色

使用：

import React from 'react';
import { library } from '@fortawesome/fontawesome-svg-core'; // 导入图标仓库
import { fas } from '@fortawesome/free-solid-svg-icons'; // 全部图标
import Icon from './components/Icon/Icon';
library.add(fas) // 把图标添加进仓库


function App() {
  return (
    <div className="App">
      <header className="App-header">
      
      <Icon icon='arrow-down' size='9x' theme='primary' />
      
      </header>
    </div>
  );
}

export default App;

<Icon icon='arrow-down' size='9x' theme='primary' />

效果：