React and typescript fortawesome types

Question

Hello I have the following interface:

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

export const SideBarTags: ITag[] = [
  {
    name: 'Tutoriais',
    link: '../tutorials',
    icon: faFileAlt,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Avisos',
    link: '../news',
    icon: faNewspaper,
    dropdownItems: null,
    active: false,
  },
  {
    name: 'Serviços',
    link: '../services',
    icon: faMeteor,
    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: faWallet,
    active: false,
    dropdownItems: [
      { name: 'Histórico', link: '/history' },
      { name: 'Adicionar Crédito', link: '/add' },
    ],
  },
];

But this way I need to import fortawesome twice I wanted to use a type on my icon

I found the following for typescript:

const coffeeLookup: IconLookup = { prefix: 'fas', iconName: 'coffee' }

const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

But I'm not able to imagine how I will adapt this to my interface

Answer 1

I didn't understood why you needed to import it twice. And are you speeking about fontawesome ? Did you tried to type your icon as IconType, from the react-icon module ?