react-icons 图标

https://react-icons.github.io/react-icons
react项目自定义喜欢的图标库
提供了数千个免费的开源图标，能寻找到“恰到好处”的图标

npm install react-icons --save

按需加载，React Icons将图标导出为React组件

import { FaBeer } from 'react-icons/fa';
function App() {
  return (
    <h3>
      Lets go for a
      <FaBeer />
      <FaBeer
        color="#008f68"
        size="50px"
        style={{ margin: '0 5px' }}
      />
    </h3>
  );
}

antd-icons

import { IconName } from "react-icons/ai"
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

游戏图标

import { IconName } from "react-icons/gi"

svg-icon

svg，可缩放矢量图形
SVG文件通常比其他图像格式小几个数量级，尤其是对于图标之类的东西

react-svg变形图标

svg图标动画
react-svg-morph https://github.com/gorangajic/react-svg-morph/
github文档 https://github.com/gorangajic/react-svg-morph/

var Checkbox = require('react-icons/lib/md/check-box-outline-blank');
var Check = require('react-icons/lib/md/check');
var {MorphReplace} = require('react-svg-morph');
var MorphCheckbox = React.createClass({
  render: function () {
    var icon;
    if(this.props.checked) {
      icon = <Check key="check" fill="#00ff00"/>;
    } else {
      icon = <Checkbox key="checkbox"/>;
    }
    return (
      <MorphReplace width={24} height={24}>
        {icon}
      </MorphReplace>
    )
  }
});