[react]Icon(mui-icon、react-icons、@tabler-icons)の使用
1. @mui/icons-material
1) install
// with npm
npm install @mui/icons-material
2) usage
// with npm
npm install @mui/icons-material
import MenuIcon from '@mui/icons-material/Menu';
<MenuIcon sx={{ fontSize: '30px' }} color="action" />
2. react-icons
1) install
npm install react-icons --save // npm
2) usage
npm install react-icons --save // npm
import { FaFan } from 'react-icons/fa';
<FaFan size="30" />
リファレンス 3. @tabler-icons
1) install
npm i @tabler/icons
2) usage
// assets
import { IconDashboard, IconDeviceAnalytics, IconHeartRateMonitor } from '@tabler/icons';
// constant
const icons = {
IconDashboard,
IconDeviceAnalytics,
IconHeartRateMonitor
};
children: [
{
id: 'default',
title: 'Control',
type: 'item',
url: '/dashboard/default',
icon: icons.IconDashboard,
breadcrumbs: false
},
Reference
この問題について([react]Icon(mui-icon、react-icons、@tabler-icons)の使用), 我々は、より多くの情報をここで見つけました
https://velog.io/@dlruddms5619/React-Icon-사용하기-mui-icon-react-icons-tabler-icons
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
npm i @tabler/icons
// assets
import { IconDashboard, IconDeviceAnalytics, IconHeartRateMonitor } from '@tabler/icons';
// constant
const icons = {
IconDashboard,
IconDeviceAnalytics,
IconHeartRateMonitor
};
children: [
{
id: 'default',
title: 'Control',
type: 'item',
url: '/dashboard/default',
icon: icons.IconDashboard,
breadcrumbs: false
},
Reference
この問題について([react]Icon(mui-icon、react-icons、@tabler-icons)の使用), 我々は、より多くの情報をここで見つけました https://velog.io/@dlruddms5619/React-Icon-사용하기-mui-icon-react-icons-tabler-iconsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol