Inject Props to React Component

Question

For security reasons, I have to update ant design in my codebase from version 3 to 4.

Previously, this is how I use the icon:

import { Icon } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
  </div>
);

Since my codebase is relatively big and every single page use Icon, I made a global function getIcon(type) that returns <Icon type={type}>, and I just have to call it whenever I need an Icon.

But starting from antd 4, we have to import Icon we want to use like this:

import { SmileOutlined } from '@ant-design/icons';

  const Demo = () => (
      <div>
       <SmileOutlined />
     </div>
  );

And yes! Now my getIcon() is not working, I can't pass the type parameter directly.

I tried to import every icon I need and put them inside an object, and call them when I need them. Here's the code:

import {
  QuestionCircleTwoTone,
  DeleteOutlined,
  EditTwoTone
} from '@ant-design/icons';


let icons = {
  'notFound': <QuestionCircleTwoTone/>,
  'edit': <EditTwoTone/>,
  'delete': <DeleteOutlined/>,
}

export const getIcon = (
  someParam: any
) => {
  let icon = icons[type] !== undefined ? icons[type] : icons['notFound'];
  return (
    icon
  );
};

My problem is: I want to put someParam to the Icon Component, how can I do that?

Or, is there any proper solution to solve my problem?

Thanks~

Answer 1

You can pass props as follows in the icons Object:

let icons = {
  'notFound':(props:any)=> <QuestionCircleTwoTone {...props}/>,
  'edit': (props:any)=><EditTwoTone {...props}/>,
  'delete':(props:any)=> <DeleteOutlined {...props}/>,
}

And then if you will pass any prop to the Icon component then it will pass the prop to the specific icon component

let Icon = icons[type] !== undefined ? icons[type] : icons['notFound'];
return (<Icon someParam={'c'}/>)