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

问题描述

我正在使用 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>
    );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）