사용자 정의 반응 아이콘 컨텍스트 래퍼

React 아이콘은 멋지고 크기를 조정하거나 색상을 변경할 수 있도록 아이콘을 래핑해야 하는 성가신 문제가 있지만 이 래퍼를 만들었습니다.

import React from 'react'
import { IconContext, IconType } from "react-icons";

type MyProps = {
  // using `interface` is also ok
  Icon: IconType;
  size: string;
  color: string;
  iconstyle?:string;
  iconAction?: () => any;
};
type MyState = {
  iconstyle: string;
};
export class TheIcon extends React.Component<MyProps, MyState> {
   constructor(props:MyProps) {
    super(props)
    this.state = { iconstyle:this.props?.iconstyle?this.props?.iconstyle:"" };
    this.clickAction = this.clickAction.bind(this); 
    }
    clickAction(){
      if(this.props.iconAction){
      console.log("click action")
      return this.props.iconAction()
      }
      return console.log("")
      }
     render() {
    return (

      <div>
        <IconContext.Provider value={{ size:this.props.size,color:this.props.color,
          className:this.state.iconstyle}}>
            <this.props.Icon onClick={()=>this.clickAction()}/>
        </IconContext.Provider>

      </div>
    );
  }
}

사용 예

import { FaTimes} from "react-icons/fa";
import { TheIcon } from './../Shared/TheIcon';

<TheIcon Icon={ FaTimes } size={"34"} color={"green"} />

full project
live demo