React Bootstrap Icon 사용하기

1. https://www.npmjs.com/package/react-bootstrap-icons
npm install react-bootstrap-icons --save 로 라이브러리 받기

2. https://icons.getbootstrap.com/ 에서 마음에 드는 아이콘 찾기

3. react에서 import { ArchiveFill, MicFill, CameraVideo, Inboxes, Bell, PersonCircle } from 'react-bootstrap-icons';과 같이 마음에 드는 아이콘 가져오기

4. <MicFill /> 처럼 원하는 위치에 붙여 넣기

 

import React, { Component } from 'react';
import { ArchiveFill, MicFill, CameraVideo, Inboxes, Bell, PersonCircle } from 'react-bootstrap-icons';
import '../index.css';

class Mynavbar extends Component {
  render() {
    return (
      <>
        <ul className='navbar'> 
          <h1><ArchiveFill/> ITube</h1>

          <li href="#"><MicFill /></li>
          <li href="#"><CameraVideo/></li>
          <li href="#"><Inboxes /></li>
          <li href="#"><Bell /></li>
          <li href="#"><PersonCircle color='pink' /></li>

        </ul>
      </>

    );
  }
}

export default Mynavbar;

index.css에 아래 코드도 있다.

.navbar{
  background-color: black;
  color: white;
  list-style: none;
}

결과)