[React] How to make custom image icon with .png files.

 

React로 KANA 어드민 웹 페이지 제작을 진행하면서,

최신 이벤트에 대한 리스트를 만들떄 우리에게 맞는 아이콘이 필요했다.

 

material-ui를 적용 하고 있어서 아래 리스트를 기반으로 제작한다.

material-ui.com/components/lists/

 

 

 

리스트에 들어갈 텍스트는 그냥 바꾸면 되는데 아이콘의 경우

맞는게 없기 때문에 커스텀으로 만들어야 했다.

 

 

 

먼저 아이폰을 만들 이미지파일(32x32)을 

아래처럼 가져와주자. 

// constants.js

export const ICONS = {
  AAA: require("../assets/images/icon/AAA.png"),
  BBB: require("../assets/images/icon/BBB.png"),
  CCC: require("../assets/images/icon/CCC.png"),
  DDD: require("../assets/images/icon/DDD.png"),
};

 

그리고 나에게 맞는 아이콘 컴포넌트를 만들어주자.

// MyIcon.js

import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';

import Avatar from '@material-ui/core/Avatar';

import { ICONS } from "./constants";

const useStyles = makeStyles((theme) => ({
  root: {
  },
  aaa: {
    color: "rgba(231,76,60,1.0)",
    backgroundColor: "rgba(231,76,60,1.0)",
  },
  bbb: {
    color: "rgba(241,148,138,1.0)",
    backgroundColor: "rgba(241,148,138,1.0)",
  },
  ccc: {
    color: "rgba(250,219,216,1.0)",
    backgroundColor: "rgba(250,219,216,1.0)",
  },
  ddd: {
    color: "rgba(176,58,46,1.0)",
    backgroundColor: "rgba(176,58,46,1.0)",
  },
  
}));


export default function Icon( props ) {
  const { type, size } = props;

  const [ icon, setIcon ] = useState(``);
  const classes = useStyles();

  useEffect(() => {
  });

  const styles = {
    img: {
        width: `${size}`,
        height: `${size}`,
    },
  };

  switch(type) {
    case 'AAA':
      return <Avatar className={classes.aaa}><img style={styles.img} src={ICONS.AAA.default} /></Avatar>;
    case 'BBB':
      return <Avatar className={classes.bbb}><img style={styles.img} src={ICONS.BBB.default} /></Avatar>;
    case 'CCC':
      return <Avatar className={classes.ccc}><img style={styles.img} src={ICONS.CCC.default} /></Avatar>;
      return <img style={styles.img} src={ICONS.MOTIONLESS.default} />;
    case 'DDD':
      return <Avatar className={classes.ddd}><img style={styles.img} src={ICONS.DDD.default} /></Avatar>;
    default:
      return <Avatar className={classes.aaa}> <img style={styles.img} src={ICONS.AAA.default} /></Avatar>;
  }
  
}


Icon.propTypes = {
  type: PropTypes.string.isRequired,
  size: PropTypes.number,
};

Icon.defaultProps = {
  size: 32
};

 

 

이제 사용하면 된다.

// MyList.js


import MyIcon from "./MyIcon";

...

return (
    <List className={classes.root}>
      <div>
      { events.map(event => 
        <ListItem button key={event.id} onClick={() => itemClick(event} >
          <ListItemAvatar>
              <MyIcon type={event.type}/>
          </ListItemAvatar>
          <ListItemText primary={event.contents} secondary={event.created} />
        </ListItem>
      )}
      </div>
    </List>
);