首页 > 解决方案 > React 和 typescript fortawesome 类型

问题描述

你好我有以下界面:

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

但是这样我需要两次导入fortawesome 我想在我的图标上使用一个类型

我为打字稿找到了以下内容:

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

常量 coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

但我无法想象我将如何适应我的界面

标签: reactjstypescript

解决方案


我不明白你为什么需要导入两次。你在谈论 fontawesome 吗?您是否尝试IconType从 react-icon 模块输入您的图标?


推荐阅读