reactjs - 我想要一个可以根据图标名称更改要显示的图标的组件

Question

我正在使用 typescript、react 和 chakra ui。
我们希望在将“twitter”传递给 Icon 组件的 IconProps 时显示 Twitter.ts 的 Icon 组件，并在传递“LinkedIn”时显示 LinkedIn 组件。
我想根据传递给 Icon 组件的名称更改要显示的图标。

索引.tsx

<Icon icon="twitter"/>

图标.ts

type Props = {
icon: string;
  fontSize?: string;
};

export const Icon: React.FunctionComponent<Props> = ({ icon,ontSize }) => (
return ()
);

Facebook.ts

import { Icon } from '@chakra-ui/react';
import React from 'react';

type Props = {
  fontSize?: string;
};

export const FacebookIcon: React.FunctionComponent<Props> = ({ fontSize }) => (
  <Icon fontSize={fontSize}>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d=""//  It's a long story, so I'll skip it.
    />
  </Icon>
);
```

Linkedin.ts

    import { Icon } from '@chakra-ui/react';
    import React from 'react';

    type Props = {
      fontSize?: string;
    };
    
    export const LinkedinIcon: React.FunctionComponent<Props> = ({ fontSize }) => (
      <Icon fontSize={fontSize}>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d=""//  It's a long story, so I'll skip it.
        />
      </Icon>
    );

Twitter.ts

    import { Icon } from '@chakra-ui/react';
    import React from 'react';

    type Props = {
      fontSize?: string;
    };
    
    export const TwitterIcon: React.FunctionComponent<Props> = ({ fontSize }) => (
      <Icon fontSize={fontSize}>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d=""//  It's a long story, so I'll skip it.
          fill="#525E6D"
        />
      </Icon>
    );

Answer 1

将组件的名称设置为变量，然后您可以扩展您想要的图标。

图标.tsx

import React from 'react';
import FacebookIcon ...
import LinkedinIcon ...
import TwitterIcon ...

type Props = {
  icon: 'facebook' | 'linkedin' | 'twitter';
  fontSize?: string;
};

const iconMap = {
  facebook: FacebookIcon,
  linkedin: LinkedinIcon,
  twitter: TwitterIcon
}

export const Icon = ({ icon, fontSize }: Props) => {
  const CompName = iconMap[icon];

  return <CompName {...{ fontSize }} />;
};