styled component 로 react icon css 적용하기

함수형 컴포넌트에서 react icons에 있는 아이콘들을 사용할때 CSS 속성을 styled component 로 주는 경우이다.

태그에 className 을 주고 상위태그에 nesting 하는 형식으로 CSS 속성을 줄 수 있다

import { GiMushroomHouse } from 'react-icons/gi';

// 먼저 react-icons 사이트에서 복사한 아이콘을 import 한다

  return (
    <Navigation>
      <TopContainer>
        <GiMushroomHouse className="logo" />
        <Logo>WeAre BnB</Logo>
  )

// <아이콘이름 className="logo" /> 형식으로 클래스네임을 정해준다

const Navigation = styled.nav`
  position: relative;
  max-width: 1440px;
  height: 180px;
  padding: 20px 40px 0px 30px;
  background-color: white;

  .logo {
    position: relative;
    left: 35px;
    font-size: 50px;
    color: #ff385c;
  }
  `;

// 상위 태그인 Navigation 태그안에 (.클래스네임) 으로 선택하여 CSS 속성을 줄 수 있다