React) Material ui Icons

Material UI 란?? 

리액트 개발에서 쉽게 사용할 수 있는 UI 프레임워크로 다양한 디자인 요소들을 제공한다.

 

Material UI 사용법

npm install @material-ui/icons

해당 명령어로 Material UI 설치한다.

 

https://mui.com/material-ui/material-icons/

Material Icons - Material UI

해당 페이지에서 원하는 아이콘 키워드를 검색하고 클릭하면

import  코드를 바로 복사하여 컴포넌트처럼 삽입 할 수 있다.

 

 

import React from 'react'
import MovieIcon from '@mui/icons-material/Movie';
import { Link } from 'react-router-dom';
import './header.css';

function Header() {
  return (
    <div className='header'>
        <Link to="/" className='Logo'><MovieIcon sx={{ fontSize: 100 }} />
        <p className='logoText'>Lettuce의 영화소개</p></Link>
        
    </div>
  )
}

export default Header;

- 리액트 헤더의 로고를 Material UI로 활용 한 예시 코드

 

>>> 결과

 

 

참조 : https://www.daleseo.com/material-ui-icons/