Show battlesuit feature icon

src/components/atoms/BattlesuitFeatureLabel.tsx

@@ -0,0 +1,32 @@
+import { Flex, Text } from '@theme-ui/components'
+import { battlesuitStrengths } from '../../lib/safeData'
+import SquareImageBox from './SquareImageBox'
+
+interface BattlesuitFeatureLabelProps {
+  feature: string
+}
+
+const BattlesuitFeatureLabel = ({ feature }: BattlesuitFeatureLabelProps) => {
+  const featureData = battlesuitStrengths.find(
+    (strength) => strength.value === feature
+  )
+  if (featureData == null) {
+    return <Text>{feature}</Text>
+  }
+  const { label, icon } = featureData
+  return (
+    <Flex sx={{ alignItems: 'center' }}>
+      {featureData != null && (
+        <SquareImageBox
+          size={30}
+          src={`/assets/honkai3rd/${icon}.png`}
+          alt={label}
+          mr={1}
+        />
+      )}
+      <Text>{label}</Text>
+    </Flex>
+  )
+}
+
+export default BattlesuitFeatureLabel

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Heading, Paragraph, Text } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Image from 'next/image'
 import React from 'react'
+import BattlesuitFeatureLabel from '../../../components/atoms/BattlesuitFeatureLabel'
 import BattlesuitRankIcon from '../../../components/atoms/BattlesuitRankIcon'
 import TypeLabel from '../../../components/atoms/TypeLabel'
 import ValkyrieLabel from '../../../components/atoms/ValkyrieLabel'
@@ -13,7 +14,6 @@ import {
   getBattlesuitById,
   listBattlesuits,
 } from '../../../data/honkai3rd/battlesuits'
-import { battlesuitStrengths } from '../../../lib/safeData'
 
 interface BattlesuitShowPageProps {
   battlesuit: BattlesuitData
@@ -72,18 +72,15 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
           <Box p={2} sx={{ borderBottom: 'default' }}>
             <TypeLabel type={battlesuit.type} />
           </Box>
-          <Box p={2}>
+          <Flex p={2}>
             {battlesuit.strengths.map((strength) => {
-              const strengthData = battlesuitStrengths.find(
-                (aStrength) => aStrength.value === strength
-              )
               return (
-                <Text mx={1} key={strength}>
+                <Box mr={2} key={strength}>
-                  {strengthData != null ? strengthData.label : strength}
+                  <BattlesuitFeatureLabel feature={strength} />
-                </Text>
+                </Box>
               )
             })}
-          </Box>
+          </Flex>
         </Box>
 
         <BattlesuitSkillGroupCard