refactor: make superblock icon a React component (#51901)

client/src/assets/icons/superblock-icon.tsx

@@ -40,14 +40,14 @@ const iconMap = {
   [SuperBlocks.UpcomingPython]: PythonIcon
 };
 
-const generateIconComponent = (
+type SuperBlockIconProps = {
-  superBlock: SuperBlocks,
+  superBlock: SuperBlocks;
-  className: string
+} & React.SVGProps<SVGSVGElement>;
-): JSX.Element => {
+
+export function SuperBlockIcon(props: SuperBlockIconProps): JSX.Element {
+  const { superBlock, className } = props;
   // fallback in case super block doesn't exist and for tests
   const Icon = iconMap[superBlock] ? iconMap[superBlock] : ResponsiveDesign;
 
-  return <Icon className={className} />;
+  return <Icon className={className} {...props} />;
-};
+}
-
-export { generateIconComponent };

client/src/components/Map/index.tsx

@@ -8,7 +8,7 @@ import {
   getFirstNotAuditedSuperBlock,
   superBlockOrder
 } from '../../../../shared/config/superblocks';
-import { generateIconComponent } from '../../assets/icons';
+import { SuperBlockIcon } from '../../assets/icons/superblock-icon';
 import LinkButton from '../../assets/icons/link-button';
 import { Link, Spacer } from '../helpers';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
@@ -77,7 +77,7 @@ function MapLi({
       >
         <Link className='btn link-btn btn-lg' to={`/learn/${superBlock}/`}>
           <div style={linkSpacingStyle}>
-            {generateIconComponent(superBlock, 'map-icon')}
+            <SuperBlockIcon className='map-icon' superBlock={superBlock} />
             {getSuperBlockTitleForMap(superBlock)}
           </div>
           {landing && <LinkButton />}

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SuperBlocks } from '../../../../../shared/config/superblocks';
-import { generateIconComponent } from '../../../assets/icons';
+import { SuperBlockIcon } from '../../../assets/icons/superblock-icon';
 import { Spacer } from '../../../components/helpers';
 
 interface SuperBlockIntroProps {
@@ -29,7 +29,7 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
         {i18nSuperBlock}
       </h1>
       <Spacer size='medium' />
-      {generateIconComponent(superBlock, 'cert-header-icon')}
+      <SuperBlockIcon className='cert-header-icon' superBlock={superBlock} />
       <Spacer size='medium' />
       {superBlockIntroText.map((str, i) => (
         <p key={i}>{str}</p>