2019/11/22

在 React 使用 Font Awesome

在【[Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧 】
這篇看到 REACT 搭配 Font Awesome 的畫面後，想試試看是否能在REACT專案中也套入它的效果。


因為REACT網站不能夠像範例那樣直接使用HTML引入的手法，所以就用正規的import方式來使用。


第一步：使用 Font Awesome 元件

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

這一步是要能在 REACT 使用 Font Awesome 標籤，例如：

<FontAwesomeIcon icon={fas.faAngleRight} size="2x" />


第二步：把 Font Awesome 圖示全部載入

因為 Font Awesome 圖示非常多，一個一個載入要打非常多的字，所以先一口氣載入進來，省得去找出自己要的時間。

這只是冰山一角

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

<FontAwesomeIcon icon={fas.faAngleRight} size="2x" />


第二步完成後就能在 FontAwesomeIcon 裡使用 icon 屬性。


畫圈圈的作法

紅框處有個圓圈，中間還有雙向符號，看似 1 個圖型，實由 2 個圖型重疊來達成此效果。

這裡使用到【Layouts】技術，如下圖：
<span className="exchange-icon fa-layers fa-fw fa-stack">
  <FontAwesomeIcon icon={far.faCircle} size="2x" />
  <FontAwesomeIcon icon={fas.faExchangeAlt} size="1x" />
</span>

利用 1 個 Layouts 把圖型合併，也是這個範例很神奇的特色。

結論

REACT資源雖然超級多，實際用起來才發現可以使用的資料非常零碎，每找出一個解法才發現解得不完全，要不就是錯誤，要諸多嚐試才能得到理想的成果。

以上提供給各位做個參考。 😄 😄 😄

See alse :

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)