Apps Script用Sheet生成動態網頁(19): 選單上加入圖示

前兩篇因為剛開始React就跳到實際使用，在內容歸屬上是比較硬的，今天就來一個比較簡單的部份，加入選單圖示。這裡會使用到react-icons這個套件

使用react-icons套件

react-icons蒐羅了許多設計的icon套件供我們選擇，我們可以在網站上直接看要使用哪個圖示，有提供用法和圖示名稱在上面，而且還能透過搜尋列出相關的圖示，實在是很人性化的設計。下圖就是進入react-icons官網選擇Bootstrap相關的圖示來顯示。瀏覽圖示的網站連結為 https://react-icons.github.io/react-icons/

安裝套件

yarn add react-icons

就只要這樣就完成了

引用套件

要使用則是看官網上的圖示名稱，這裡為網站的本身的招牌，以及每個選單按鈕都所以選了一個圖示，所以在MyNav.jsx裡頭引用了四個圖示的名字

import {

BsBootstrapFill,

BsHouseDoorFill,

BsFillGridFill,

BsPersonCircle,

} from 'react-icons/bs';

設計選單元件

因為選單上放圖示的動作如果每次都要寫一遍很類似的事情太麻煩了，所以設計了一個選單元件，可以自己決定是否要加入圖示icomComp就是放圖示元件，linkTo是連結到哪個網站內路徑，而childern是react預設給內部元素的屬性，這裡就是指顯示文字。

import React from 'react';

import { Nav, Row } from 'react-bootstrap';

import { LinkContainer } from 'react-router-bootstrap';

import PropTypes from 'prop-types';

const IconNavLink = ({ iconComp, linkTo, children }) => {

return (

<LinkContainer to={linkTo}>

<Nav.Link>

<div className="d-flex align-items-center">

{iconComp} {children}

</div>

</Nav.Link>

</LinkContainer>

);

};

IconNavLink.propTypes = {

iconComp: PropTypes.element,

linkTo: PropTypes.string,

children: PropTypes.element,

};

export default IconNavLink;

套用圖示到選單

這裡就是把上面的帶圖示的元件套用下去，包含Navbar.Brand

import React from 'react';

import { Navbar, Nav, Container } from 'react-bootstrap';

import {

BsBootstrapFill,

BsHouseDoorFill,

BsFillGridFill,

BsPersonCircle,

} from 'react-icons/bs';

import IconNavLink from './IconNavLink';

const MyNav = () => {

return (

<Navbar collapseOnSelect expand="md" bg="primary" variant="dark">

<Container>

<Navbar.Brand>

<BsBootstrapFill size={32} /> React on AppScript

</Navbar.Brand>

<Navbar.Toggle aria-controls="responsive-navbar-nav" />

<Navbar.Collapse id="responsive-navbar-nav">

<Nav className="me-auto">

<IconNavLink linkTo="/home" iconComp={<BsHouseDoorFill />}>

首頁

</IconNavLink>

<IconNavLink linkTo="/drive-lister" iconComp={<BsFillGridFill />}>

Drive檔案列表

</IconNavLink>

</Nav>

<Nav>

<IconNavLink linkTo="/login" iconComp={<BsPersonCircle />}>

登入

</IconNavLink>

</Nav>

</Navbar.Collapse>

</Container>

</Navbar>

);

};

export default MyNav;

成果展示