[MUI] MUI icons 아이콘 컴포넌트 props로 전달받기 | MUI 아이콘 프롭스 타입 정의 방법

타입 정의

"use client";

import React from "react";

type ExampleType = {
  Icon: React.ReactElement;
};

const Example = ({ Icon }: ExampleType) => {
  return (
    <div>
          {Icon}
    </div>
  );
};

export default Example;

타입 정의 방법 : React.ReactElement로 정의 후 JSX로 렌더링

사용 예시

import Example from "./Example";
import {  Psychology, Science, Engineering, MedicalServices, Gavel, Palette, Business, School, Agriculture, Waves, Policy } from '@mui/icons-material';

const MainContainer = () => {
  const icons = [
    { Icon: <Psychology /> },
    { Icon: <Psychology /> },
    { Icon: <Science /> },
    { Icon: <Engineering /> },
    { Icon: <MedicalServices /> },
    { Icon: <Gavel /> },
    { Icon: <Palette /> },
    { Icon: <Business /> },
    { Icon: <School /> },
    { Icon: <Agriculture /> },
    { Icon: <Waves /> },
    { Icon: <Policy /> },
  ];

  return (
    <div>
      {colleges.map((el, idx) => (
        <Example key={idx} Icon={el.Icon} />
      ))}
    </div>
  );
};

export default MainContainer;