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

问题描述

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

index.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>
    );

解决方法

将组件的名称设置为一个变量，然后就可以展开你想要的图标了。

图标.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 }} />;
};