728x90
반응형
패키지 설치
1,000 여종의 SVG 아이콘을 제공하는 @material-ui/icons
$ npm i @material-ui/icons
사용 방법
Material Icons 페이지에서 원하는 아이콘을 검색한다.
해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용한다.
import EcoIcon from "@material-ui/icons/Eco";
export default () => <EcoIcon />;아이콘의 색상은 'color' prop으로 바꿀 수 있다.
<EcoIcon color="primary" />
<EcoIcon color="secondary" />
<EcoIcon color="action" />
<EcoIcon color="disabled" />
<EcoIcon color="error" />아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다.
<EcoIcon fontSize="small" />
<EcoIcon />
<EcoIcon fontSize="large" />
커스텀 아이콘 사용하기
<SvgIcon> 컴포넌트를 사용해 커스텀 아이콘을 사용할 수 있다.
import { SvgIcon } from "@material-ui/core";
export default () => (
<SvgIcon color="primary">
<path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" />
</SvgIcon>
);
폰트 아이콘 사용하기
SVG 형식의 아이콘 사용이 권장되지만, 사용할 수 없는 경우라면 웹폰트 아이콘으로도 사용 가능하다.
index.html 파일의 <head>에 아래의 코드를 추가해 Material Icons를 웹폰트로 불러와야 한다.
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>그 다음에 <Icon> 컴포넌트에 아이콘 이름을 넘겨주면 폰트 아이콘을 사용할 수 있다.
import { Icon } from "@material-ui/core";
export default () => (
<Icon color="secondary" fontSize="large">
eco
</Icon>
);
728x90
반응형
'프론트엔드' 카테고리의 다른 글
| Material UI - Paper, Card (0) | 2024.08.13 |
|---|---|
| Material UI - TextField (0) | 2024.08.13 |
| Material UI - Button (0) | 2024.08.13 |
| Material UI - 소개 및 Typography (0) | 2024.08.13 |
| Webpack? (0) | 2024.08.12 |
