在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:
<FontAwesomeIcon icon="coffee" />
使用这种方式之前需要你已经把 coffee 添加到了库中,或者当外部的 loading icon bundles 已经包含了这个icon.
下面三种方式中的两种你可以在 React 中使用 Font Awesome 5. 我们将会总结这三种方式的利弊并给出他们的详细说明.
-
声明导入
允许 icons 成为子集,优化你的最终 bundle . 只有你导入的
icons 会包含在 bundle 中.然而,这种方式需要你在每一个使用到的组件中声明 . 当多个组件需要导入的时候这可能有点无趣 , 你可以使用下面这种方式 . -
创建一个库
只在初始的模块中声明导入 icons 一次 , 然后将他们加入到库中 . 然后就可以在任意的组件中通过引用使用他们 . 再也不用在每一个组件中声明这些已经在库中声明的 icons 了 .
-
外部导入
如果你已经在 React 组件之外通过
<script>标签导入了这些 icons ,并且你的 React 组件可以在不需要单独导入的情况下通过引用 icons . 你可以在 React 组件中通过字符串索引使用他们 , 就像他们已经加入到库中一样.
声明导入
下面的例子中我们使用了@fortawesome/fontawesome-free-solid模块 , 所以需要将他们添加到工程中:
$ npm i --save @fortawesome/fontawesome-free-solid
或者
$ yarn add @fortawesome/fontawesome-free-solid
组件就可以像这样:
import ReactDOM from 'react-dom'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'
const element = {
<FontAwesomeIcon icon={faCoffee} />
}
ReactDOM.render(element, document.body)
注意: faCoffee icon 已通过 @fortawesome/fontawesome-free-solid 导入为一个对象,并且将这个对象传给了 icon 属性.
声明导入 icons 就像在 Font Awesome 中众多 icon 中挑选你使用的 icon 然后把她们引入最终的 bundled 文件中.
通过建立一个库更便捷的在整个 App 中通过索引使用 icons
你可能需要在 app 中的多个组件中使用 icons , 但是使用声明导入的方式需要在每个组件中声明每个使用的 icon .
你可以将他们添加到库中 . 并且只在 app 模块初始化的时候导入一次 , 就可以在所有 app 组件中使用加入库中的 icon .
假定 App.js 是 app 的初始文件 , 导入这个库 . 在这个例子中, 我将使用两个单独的 icon faCheckSquare faCoffee 我还会使用 @fortawesome/fontawsome-free-brands 中的所有的商标 icon . 这个例子将展示怎样通过建立库来在你导入很多 icon 的时候将代码保持整洁, 但是我们保持了实例简明你可以想象一下如果这些 icon 扩大到很多的时候会怎样.
别忘了添加 @fortawesome/fontawesome-free-brands :
$ npm i --save @fortawesome/fontawesome-free-brands
或
$ yarn add @fortawesome/fontawesome-free-brands
在 app 被初始化的 App.js 中:
import ReactDome from 'react-dom';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
fontawesome.library.add(brands, faCheckSquare, faCoffee)
让我们看看发生了什么
当我们调用 fontawesome.library.add() 我们传入了:
-
brands包含了@fortawesome/fontawesome-free-brands所有的商标 icon , 所以这个包中的所有 icon 都可以在 app 中通过 icon 的名称索引使用. 例如:apple,microsoft,google. -
faCheckSquare和faCoffee: 添加的每个 icon 都可以在 app 中通过名称字符串check-squarecoffee使用
假定在 app 中有两个 React 组件 Beverage Gadget . 你不需要重新在导入这些 icon , 只需要导入 FontAwesome 组件 , 并在使用的时候 icon 属性上赋上icon 的名称即可 .
import React from 'react'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
const Beverage = () => (
<div>
<FontAwesomeIcon icon="check-square">
Favorite beverage: <FontAwesomeIcon icon="coffe"/>
</div>
)
export default Beverage
在以这种方式引用 icon 的时候 , fas 会作为默认前缀(Font Awesome Solid 的前缀是fas, 所以在使用 Font Awesome Solid 的时候可以使用默认前缀). 接下来我们将会解释它的意思 , 和改变默认前缀 .
假定 Gadget.js 这样定义:
import React from 'react'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
const Gadget = () => (
<div>
<FontAwesomeIcon icon="check-square"/>
Popular gadgets come from vendors like:
<FontAwesomeIcon icon={["fab","apple"]}/>
<FontAwesomeIcon icon={["fab","microsoft"]}/>
<FontAwesomeIcon icon={["fab","google"]}/>
</div>
)
export default Gadget
注意:
- 在这个组件中我们同样使用
check-square的 icon , 尽管我们没有明确的导入到这个组件中 . 只需要在App.js中导入并将它加入到库中就可以在所有的组件中使用 . - 我们也使用了
apple,microsoft和google这些品牌 icon , 它们同样没用被逐一导入, 但是它们都被包含在brand中,并在App.js中加入到库中. - 我们给这些品牌 icon 添加了
fab前缀 .
来看一下添加前缀的时候发生了什么?
首先 , 前面我们已经介绍过了 , 在使用的过程中如果不添加前缀, fas 会作为默认的前缀.
check-square 同样被添加 fas 前缀 , 这是我们想要的结果: 因为 @fortawesome/fontawesome-free-solid 的前缀就是 fas .
然而 , apple , microsoft google 这些商标 icon 在 @fortawesome/fontawesome-free-brands 中 , 所以我们需要指定不同的前缀 fab , 而非默认的 fas .
当使用提供前缀的语法时: 前缀 和 icon 名称都通过字符串提供 .
icon 属性可以是下面的形式:
- icon 对象 , 例如
{faCoffee} - 字符串对象 , 例如
"coffee"(字符串两边的花括号是可选项,我们省略了花括号) - 字符串数组 , 第一个元素是前缀, 第二个前缀是 icon 名称
外部导入
有一些场景下,你可能在 React 组件中使用 <script> 全局导入的 icon 索引, 例如一个非单页面应用的网站 . 一个使用了包含 Font Awesome icon 的 主题或者模版 , 现在你想添加一些 Ract 组件 , 你可直接通过引用使用这些 icon 而不需要单独导入它们.
假定加载 React 组件 的 DOM 已经在 <head> 导入了:
<script src="https://example.com/fontawesome-free-solid.js"></script>
现在你可以在任意 React 组件中使用这些导入的 icon:
<FontAwesomeIcon icon="coffee" />
特性
在下面的代码片段中, 我们将通过 icon 的名称使用它们. 请确保在使用前已经通过上面的方式导入了他们.
基础
Spin and pulse 动画:
<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="spinner" pulse />
Fixed width:
<FontAwesomeIcon icon="spinner" fixedWidth />
Border:
<FontAwesomeIcon icon="spinner" border />
List items:
<FontAwesomeIcon icon="spinner" listItem />
Flip horizontally, vertically, or both:
<FontAwesomeIcon icon="spinner" flip="horizontal" />
<FontAwesomeIcon icon="spinner" flip="vertical" />
<FontAwesomeIcon icon="spinner" flip="both" />
Size:
<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />
Rotate:
<FontAwesomeIcon icon="spinner" rotate={90} />
<FontAwesomeIcon icon="spinner" rotate={180} />
<FontAwesomeIcon icon="spinner" rotate={270} />
Pull left or right:
<FontAwesomeIcon icon="spinner" pull="left" />
<FontAwesomeIcon icon="spinner" pull="right" />
指定的 class names:
<FontAwesomeIcon icon="spinner" className="highlight" />
高级
Power Transforms:
<FontAwesomeIcon icon="spinner" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="spinner" transform={{ rotate: 42 }} />
Composition:
<FontAwesomeIcon icon="coffee" mask={['far', 'circle']} />
Symbols:
<FontAwesomeIcon icon="edit" symbol />
<FontAwesomeIcon icon="edit" symbol="edit-icon" />
