React font awesome构建一个不完美的库

Question

我正在玩'@ fortawesome / react-fontawesome'（使用FontAwesome5），这就是我想做的事情 -

在我的App.js

中

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faTrash, faCoffee, faSquare } from '@fortawesome/fontawesome-pro-light'
fontawesome.library.add(faTrash, faCoffee, faSquare)

和我的component.js

import {FontAwesomeIcon} from 'eui-components'

function Test () {
  return (

    <tr>
      <td><Button bsStyle="primary">
        Delete
        <FontAwesomeIcon icon = {["fal", "coffee"]}/>
      </Button>
      </td>
    </tr>
  )
}
export default Test

它有效

然后我尝试了

<FontAwesomeIcon icon={["fal", "bath"]} />

尽管它没有被添加到库中，但仍然有效。这非常令人困惑。如何确保只添加到库中的项目才有效？这是我的理解。我错了吗？

代码可见 codesandbox.io/s/40v5jk6no7