<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

​

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">

  <div class="offcanvas-header">

    <h5 id="offcanvasTopLabel">Offcanvas top</h5>

    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

  </div>

  <div class="offcanvas-body">

    ...

  </div>

yarn add react-icons

​

npm install react-icons --save

// ###### Installation ######

   npm install react-icons --save

​

// ###### Usage ######

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {

  render() {

    return <h3> Lets go for a <FaBeer />? </h3>

  }

}

Installation (for standard modern project)

​

npm install react-icons --save

yarn add react-icons --save

// or

yarn add react-icons

​

​

Installation (for meteorjs, gatsbyjs, etc)

​

npm install @react-icons/all-files --save

npm i react-icons

npm install react-icons --save

import { FaBeer } from 'react-icons/fa';

<FaBeer />

 npm i react-icons