Time: 20200303
Link: react-icons.netlify.com,
https://youtu.be/4l0nsK4ezNc?list=PLC3y8-rFHvwhAh1ypBvcZLDO6I7QTY5CM
License: Apache，不是那么開(kāi)放

安裝

yarn add react-icons

使用

import {ICON_NAME} from 'react-icons/fa'
import {ICON_NAME} from 'react-icons/md'

示例：

import React from 'react';
import { FaReact } from 'react-icons/fa'

import './App.css';

function App() {
  return (
    <div className="App">
     <FaReact color="purple" size="10rem"/>
    </div>
  );
}

export default App;

使用上下文來(lái)傳遞數(shù)據(jù)

import React from 'react';
import { FaReact } from 'react-icons/fa'
import { MdAlarm } from 'react-icons/md'
import { IconContext } from 'react-icons'

import './App.css';

function App() {
  return (
    <IconContext.Provider value={{color: 'blue', size: '5em'} }>
    
      <div className="App">
        <FaReact />
        <MdAlarm />
      </div>

    </IconContext.Provider>
  );
}

export default App;

設(shè)置優(yōu)先級(jí)

在元素上設(shè)置即可重定義樣式。

<IconContext.Provider value={{color: 'blue', size: '5em'} }>
    
      <div className="App">
        <FaReact />
        <MdAlarm color="purple"/>
      </div>

    </IconContext.Provider>

END.