iT邦幫忙

2

React 學習筆記_23(在React中使用Icons)

簡介

Font Awesome 是一個基於CSS和LESS的字體和圖標工具套件,常常能夠在HTML中加入一些圖標,但是在React中是使用JSX來撰寫HTML的物件,它與一般的HTML不一樣所以無法直接使用Font Awesome,本篇介紹如何利用別種方法在React中使用Font Awesome。

react-fontawesome

安裝

Using NPM:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

Yarn:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

使用

在import中需要引入需要的圖標名稱,輸入的規則 : 若名稱為fas fa-ato 則import {faAtom}
https://ithelp.ithome.com.tw/upload/images/20200502/20124767g9jnSc1SQx.png

import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAtom } from '@fortawesome/free-solid-svg-icons'

class App extends React.Component
{
    render()
    {
        return(
            <div className="icon">
                <FontAwesomeIcon icon={faAtom} />
            </div>
        )
    }
}

export default App;

結果 : https://ithelp.ithome.com.tw/upload/images/20200502/20124767IyVp6iMuLG.png

改變樣式

使用Font Awesome所提供的Icon組件有支援SASS來更改其樣式。

.icons{
    svg{
        color: #000;
        width: 50px;
        height: 50px;
    }
}

結果 : https://ithelp.ithome.com.tw/upload/images/20200502/20124767VAADophJNc.png

react-icons

安裝

Using NPM :

npm install react-icons --save

Yarn :

yarn add react-icons

使用

react-icons 官網中可以使用多種類型的圖案,而不同種類的圖案也需要import不同的Component。

https://ithelp.ithome.com.tw/upload/images/20200503/201247670ZLYTo779h.png

import React from "react";
import { BsFillArchiveFill  } from "react-icons/bs";

class App extends React.Component
{
    render()
    {
        return(
            <div className = "icon">
                <BsFillArchiveFill />
            </div>
        )
    }
};

export default App;

結果 : https://ithelp.ithome.com.tw/upload/images/20200503/201247673HVxrohfQy.png

改變樣式

使用react-icons功能依樣能夠使用SASS來改變其樣式

.icons{
    svg{
        color: #00f;
        width: 50px;
        height: 50px;
    }
}

結果 : https://ithelp.ithome.com.tw/upload/images/20200503/20124767cFSL8I7SyD.png
https://ithelp.ithome.com.tw/upload/images/20200503/2012476774AuWI9HIJ.png

參考資料 :
react-fontawesome/GitHub
react-icons/GitHub
react-icons


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言