在React中使用fortawesome

在React中使用fortawesome

官方文档链接 英文

安装

$ npm i --save @fortawesome/fontawesome

$ npm i --save @fortawesome/react-fontawesome

或者

$ yarn add @fortawesome/fontawesome

$ yarn add @fortawesome/react-fontawesome

使用

你可以在 React 组件中这样使用Font Awesome:

使用这种方式之前需要你已经把 coffee 添加到了库中,或者当外部的 loading icon bundles 已经包含了这个icon.

下面三种方式中的两种你可以在 React 中使用 Font Awesome 5. 我们将会总结这三种方式的利弊并给出他们的详细说明.

1. 声明导入

   允许 icons 成为子集,优化你的最终 bundle . 只有你导入的
   icons 会包含在 bundle 中.然而,这种方式需要你在每一个使用到的组件中声明 . 当多个组件需要导入的时候这可能有点无趣 , 你可以使用下面这种方式 .

2. 创建一个库

   只在初始的模块中声明导入 icons 一次 , 然后将他们加入到库中 . 然后就可以在任意的组件中通过引用使用他们 . 再也不用在每一个组件中声明这些已经在库中声明的 icons 了 .

3. 外部导入

   如果你已经在 React 组件之外通过

   现在你可以在任意 React 组件中使用这些导入的 icon:

   特性

   在下面的代码片段中, 我们将通过 icon 的名称使用它们. 请确保在使用前已经通过上面的方式导入了他们.

   基础

   Spin and pulse 动画:

   Fixed width:

   Border:

   List items:

   Flip horizontally, vertically, or both:

   Size:

   Rotate:

   Pull left or right:

   指定的 class names:

   高级

   Power Transforms:

   Composition:

   Symbols: