TypeScript: Property 'icon' does not exist on type 'JSX.IntrinsicElements'

Question

Hello I'm trying to use typescript with react-icons as follows:

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' },
    ],
  },
];

and did the following in tsx:

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

but i got this erros:

Property 'icon' does not exist on type 'JSX.IntrinsicElements'. TS2339

I can't seem to find the right way to do this I'm not able to find the correct way to do this, how I could pass an icon or its name through my array and render in tsx

Answer 1

In JSX, lower case tags are used for the built in elements like <div> <a> or <span> , and it's complaining that <icon> is not one of those. For custom components, you need to use an upper case letter. If you're receive a prop that's in lower case that's fine, but you'll need to rename it before using it for a jsx tag. For example:

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

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