[React] MUI - custom SVG Icon 만들기

 

 

[MyIcon.jsx]
import React from 'react'
import { Icon } from "@material-ui/core";
import ICONS   from '../../imgs/playbtn.svg';


// 방법1
const Logo = () => (
  <Icon className="exIcon" style={{width: '100%', height: '100%', color: "red"}} >
    <img  src={ICONS} height={20} width={20}/>
  </Icon>
);
export default Logo;

// 방법2
// const Logo = () => {
//   return (
//       <Icon style={{width: '100%', height: '100%', color: "red"}} >
//         <img className="exIcon" src={ICONS} height={20} width={20}/>
//       </Icon>
//     )
// }
// export default Logo;

// 방법3
// export default function Logo() {
//   return (
//       <Icon style={{width: '100%', height: '100%', color: "red"}} >
//         <img className="exIcon" src={ICONS} height={20} width={20}/>
//       </Icon>
//   )
// }

 

[ShowIcon.jsx]
import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SaveIcon from '@mui/icons-material/Save';

import starIcon  from '../../imgs/star.png';

import Logo from "./MyIcon";

export default function   LoadingButtonsTransitionEx() {
  const [loading, setLoading] = React.useState(false);
  function handleClick() {
    setLoading(true);
  }

  return (
    <Box sx={{ '& > button': { m: 1 } }}>

      <LoadingButton
        onClick={handleClick}
        startIcon={<Logo />}       ★
        endIcon={<SaveIcon />}     ★
        loading={loading}
        loadingPosition="end"
        variant="contained"
      >
        Send
      </LoadingButton>


      <img src={ starIcon} alt="ddd" />
    </Box>
  );
}