Reactjs TypeScript:Property'；图标'；不存在于类型'；JSX.intrinsiceelements'；

您好，我正在尝试使用带有react图标的typescript，如下所示：

import { IconType } from 'react-icons';
import { FiAlertOctagon } from 'react-icons/fi';

export interface IDropdownItems {
  name: string;
  link: string;
}
export interface ITag {
  name: string;
  link: string;
  icon: IconType;
  dropdownItems: IDropdownItems[] | null;
  active: boolean;
}

export const SideBarTags: ITag[] = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: FiAlertOctagon,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: FiAlertOctagon,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: FiAlertOctagon,
    active: false,
    dropdownItems: [
      { name: 'Elo Boost', link: '/eloBost' },
      { name: 'Duo Boost', link: '/duoBoost' },
      { name: 'MD10', link: '/eloBost' },
      { name: 'Coaching', link: '/duoBoost' },
      { name: 'Vitóriais', link: '/duoBoost' },
    ],
  },
  {
    name: 'Carteira',
    link: '../cartcredit',
    icon: FiAlertOctagon,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

并在tsx中执行了以下操作：

<a>
  <icon />
  <span className="li-name">{name}</span>
</a>

{name}

但我有一个错误：

类型“JSX.IntrinsicElements”上不存在属性“icon”。 TS2339

我似乎找不到正确的方法来做这件事

---

我找不到正确的方法来实现这一点，如何通过数组传递图标或其名称并在tsx中呈现在JSX中，小写标记用于内置元素，如

或

，它抱怨

不是其中之一。对于自定义组件，需要使用大写字母。如果您收到一个小写的道具，这很好，但是您需要在将其用于jsx标记之前对其进行重命名。例如：

const Example = (props) => {
  const Icon = props.icon;

  return (
    <a>
      <Icon />
      <span className="li-name">{name}</span>
    </a>
  )
}

const示例=（道具）=>{
const Icon=props.Icon；
返回(
{name}
)
}