Repository: freeCodeCamp/freeCodeCamp
File: client/src/assets/chapter-icon.tsx (TypeScript)

Code before:
  [FsdChapters.Html]: Html,
  [FsdChapters.Css]: Css,
  [FsdChapters.Javascript]: JavaScriptIcon,
  [FsdChapters.FrontendLibraries]: ReactIcon,
  [FsdChapters.RelationalDatabases]: DatabaseIcon,
  [FsdChapters.BackendJavascript]: NodeIcon,
  [FsdChapters.Python]: Python,
  [FsdChapters.Career]: Graduation,
  [FsdChapters.RwdExam]: Graduation,
  [FsdChapters.JsExam]: Graduation,
  [FsdChapters.Fed]: ReactIcon,
  [FsdChapters.FedExam]: Graduation,
  [FsdChapters.PythonExam]: Graduation,
  [FsdChapters.RdbExam]: Graduation,
  [FsdChapters.Bed]: NodeIcon,
  [FsdChapters.BedExam]: Graduation,
  [FsdChapters.FsdExam]: Graduation,
  [ZhA1ChineseChapters.zhA1Welcome]: faDoorOpen,
  [ZhA1ChineseChapters.zhA1PinYin]: faCubes,
  [ZhA1ChineseChapters.zhA1Greetings]: faComments,
  [ZhA1ChineseChapters.zhA1Family]: faPeopleGroup,
  [ZhA1ChineseChapters.zhA1Expressing]: faHands,
  [EsA1SpanishChapters.esA1Welcome]: faDoorOpen,
  [EsA1SpanishChapters.esA1Fundamentals]: faCubes,
  [EsA1SpanishChapters.esA1Greetings]: faComments,
  [EsA1SpanishChapters.esA1Details]: faIdCard
};

type ChapterIconProps = {
  chapter: FsdChapters;
} & React.SVGProps<SVGSVGElement>;

export function ChapterIcon(props: ChapterIconProps): JSX.Element {
  const { chapter, ...iconProps } = props;
  const Icon = iconMap[chapter] ?? ResponsiveDesign;

  if (typeof Icon === 'object') {
    return <FontAwesomeIcon icon={Icon} />;
  }

  return <Icon {...iconProps} />;
}


Review comment (suggestion):
```suggestion
  [A1ChineseChapters.zhA1Welcome]: faDoorOpen,
  [A1ChineseChapters.zhA1PinYin]: faCubes,
  [A1ChineseChapters.zhA1Greetings]: faComments,
  [A1ChineseChapters.zhA1Family]: faPeopleGroup,
  [A1ChineseChapters.zhA1Expressing]: faHands,
  [A1SpanishChapters.esA1Welcome]: faDoorOpen,
  [A1SpanishChapters.esA1Fundamentals]: faCubes,
  [A1SpanishChapters.esA1Greetings]: faComments,
  [A1SpanishChapters.esA1Details]: faIdCard
```

Code after:
  [FsdChapters.Html]: Html,
  [FsdChapters.Css]: Css,
  [FsdChapters.Javascript]: JavaScriptIcon,
  [FsdChapters.FrontendLibraries]: ReactIcon,
  [FsdChapters.RelationalDatabases]: DatabaseIcon,
  [FsdChapters.BackendJavascript]: NodeIcon,
  [FsdChapters.Python]: Python,
  [FsdChapters.Career]: Graduation,
  [FsdChapters.RwdExam]: Graduation,
  [FsdChapters.JsExam]: Graduation,
  [FsdChapters.Fed]: ReactIcon,
  [FsdChapters.FedExam]: Graduation,
  [FsdChapters.PythonExam]: Graduation,
  [FsdChapters.RdbExam]: Graduation,
  [FsdChapters.Bed]: NodeIcon,
  [FsdChapters.BedExam]: Graduation,
  [FsdChapters.FsdExam]: Graduation,
  [A1ChineseChapters.zhA1Welcome]: faDoorOpen,
  [A1ChineseChapters.zhA1PinYin]: faCubes,
  [A1ChineseChapters.zhA1Greetings]: faComments,
  [A1ChineseChapters.zhA1Family]: faPeopleGroup,
  [A1ChineseChapters.zhA1Expressing]: faHands,
  [A1SpanishChapters.esA1Welcome]: faDoorOpen,
  [A1SpanishChapters.esA1Fundamentals]: faCubes,
  [A1SpanishChapters.esA1Greetings]: faComments,
  [A1SpanishChapters.esA1Details]: faIdCard
};

type ChapterIconProps = {
  chapter: FsdChapters;
} & React.SVGProps<SVGSVGElement>;

export function ChapterIcon(props: ChapterIconProps): JSX.Element {
  const { chapter, ...iconProps } = props;
  const Icon = iconMap[chapter] ?? ResponsiveDesign;

  if (typeof Icon === 'object') {
    return <FontAwesomeIcon icon={Icon} />;
  }

  return <Icon {...iconProps} />;
}