mui 설치 및 아이콘 사용하기

1️⃣ mui ?

Google의 Material Design 원칙을 기반으로 한 React UI 라이브러리이다.

다양한 미리 만들어진 컴포넌트를 제공하여 개발자가 고품질의 UI를 빠르게 구축할 수 있도록 하며, 버튼, 폼, 테이블, 차트 등 다양한 UI 요소를 포함하며, 반응형 디자인과 테마 커스터마이징 기능을 지원한다.

이번 프로젝트에서는 mui에서 제공하는 아이콘을 사용해보려고 한다.

2️⃣ 설치

1️⃣-1️⃣ mui 설치 코드

아래와 코드를 통해 Material UI의 기본 컴포넌트를 설치한다.

npm install @mui/material @emotion/react @emotion/styled

@mui/material - 버튼, 폼, 테이블 등 다양한 UI 요소를 포함하는 패키지

@emotion/react @emotion/styled - MUI의 기본 스타일링 엔진, 컴포넌트의 스타일을 관리

1️⃣-2️⃣ mui 아이콘 설치 코드

아래 코드를 통해 Material Icons를 설치한다.

npm install @mui/icons-material

@mui/icons-material는 @mui/material에 의존하기 때문에 @mui/material이 먼저 설치되어 있어야 한다.

2️⃣ 아이콘 사용하기

2️⃣-1️⃣ 원하는 아이콘 가져오기

공식 페이지 - https://mui.com/material-ui/material-icons/?srsltid=AfmBOoqFhz71FFi31srEgqIp2RP3OHBu1EznDO3zDzYb7Umb6-jDX1wI

아이콘의 경우 아이콘의 내부가 채워져 있는 버전, 비어져 있는 버전 등이 있으니 필요에 따라 선택하면 된다.

원하는 아이콘을 클릭하면 위와 같이 코드를 사용할 수 있다.

2️⃣-2️⃣ 원하는 위치에 작성하기

헤더에 메뉴 버튼이 필요하여 아래와 같이 가져온 코드를 사용하였다.

import styles from './MainHeader.module.scss'
import MenuIcon from '@mui/icons-material/Menu';

function MainHeader() {
  return (
    <header className={styles.header_container}>
        <div className={styles.nav_container}>
            <div aria-label="YoT 로고" className={styles.logo_container}>
                로고
            </div>
            <div className={styles.log_in_container}>
                <span aria-label="로그인 화면 이동">LOG-IN</span>
            </div>
            <div className={styles.menu_container}>
                <MenuIcon className={styles.menu_icon} aria-label="메뉴 사이드바 활성화"></MenuIcon>
            </div>
        </div>
    </header>
  )
}

export default MainHeader

2️⃣-3️⃣ 크기 및 색상 조정

크기 및 색상의 경우 className을 통해서 조정하였다. 다른 방법이 있다면 알려주시면 감사하겠습니다 ! 😊

.menu_icon {
    font-size: 30px;
    color: chocolate;
}

아래와 같이 잘 적용된 모습을 볼 수 있다.