タイトル : Next.js MUI iconを試してみる
更新日 : 2024-01-24
カテゴリ : プログラミング
MUI iconを試してみます
MUIのIconsのページを参照して、以下みたいなかんじ。
インストール
npm install @mui/icons-material雑感
- Filled、Outlined、Rounded、Two Tone、Sharpがあるのね。知らなかった。frontendのこと知らなさすぎ?
- svgってすごいな～ pathで書けるのね。(svg icon自作したいな～)
抜粋のみ
function HomeIcon(props: SvgIconProps) {
return (
<SvgIcon {...props}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</SvgIcon>
);
}
<HomeIcon color="primary" />
<HomeIcon color="disabled" />
<HomeIcon sx={{ color: pink[500] }} />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon sx={{ fontSize: 40 }} />