Add icon to filer buttons

src/components/atoms/FilterButton.tsx

@@ -29,12 +29,14 @@ const FilterButton = ({
       px={2}
       onClick={selectFilter}
       className={active ? 'active' : ''}
+      sx={{ display: 'flex' }}
     >
       {icon != null && (
         <SquareImageBox
-          src={`/assets/honkai3rd/icons/${icon}.png`}
+          src={`/assets/honkai3rd/${icon}.png`}
           alt={label}
           size={30}
+          mr={1}
         />
       )}
       {label}

src/lib/safeData.ts

@@ -1,20 +1,28 @@
 export const battlesuitStrengths = [
-  { value: 'physical', label: 'Physical' },
+  { icon: 'feature-icons/physical', value: 'physical', label: 'Physical' },
-  { value: 'fire dmg', label: 'Fire DMG' },
+  { icon: 'feature-icons/fire-dmg', value: 'fire dmg', label: 'Fire DMG' },
-  { value: 'ice dmg', label: 'Ice DMG' },
+  { icon: 'feature-icons/ice-dmg', value: 'ice dmg', label: 'Ice DMG' },
-  { value: 'lightning dmg', label: 'Lightning DMG' },
+  {
-  { value: 'freeze', label: 'Freeze' },
+    icon: 'feature-icons/lightning-dmg',
-  { value: 'paralyze', label: 'Paralyze' },
+    value: 'lightning dmg',
-  { value: 'stun', label: 'Stun' },
+    label: 'Lightning DMG',
-  { value: 'ignite', label: 'Ignite' },
+  },
-  { value: 'bleed', label: 'Bleed' },
+  { icon: 'feature-icons/freeze', value: 'freeze', label: 'Freeze' },
-  { value: 'heavy atk', label: 'Heavy ATK' },
+  { icon: 'feature-icons/paralyze', value: 'paralyze', label: 'Paralyze' },
-  { value: 'weaken', label: 'Weaken' },
+  { icon: 'feature-icons/stun', value: 'stun', label: 'Stun' },
-  { value: 'impair', label: 'Impair' },
+  { icon: 'feature-icons/ignite', value: 'ignite', label: 'Ignite' },
-  { value: 'time mastery', label: 'Time Mastery' },
+  { icon: 'feature-icons/bleed', value: 'bleed', label: 'Bleed' },
-  { value: 'gather', label: 'Gather' },
+  { icon: 'feature-icons/heavy-atk', value: 'heavy atk', label: 'Heavy ATK' },
-  { value: 'heal', label: 'Heal' },
+  { icon: 'feature-icons/weaken', value: 'weaken', label: 'Weaken' },
-  { value: 'fast atk', label: 'Fast ATK' },
+  { icon: 'feature-icons/impair', value: 'impair', label: 'Impair' },
-  { value: 'burst', label: 'Burst' },
+  {
-  { value: 'aerial', label: 'Aerial' },
+    icon: 'feature-icons/time-mastery',
+    value: 'time mastery',
+    label: 'Time Mastery',
+  },
+  { icon: 'feature-icons/gather', value: 'gather', label: 'Gather' },
+  { icon: 'feature-icons/heal', value: 'heal', label: 'Heal' },
+  { icon: 'feature-icons/fast-atk', value: 'fast atk', label: 'Fast ATK' },
+  { icon: 'feature-icons/burst', value: 'burst', label: 'Burst' },
+  { icon: 'feature-icons/aerial', value: 'aerial', label: 'Aerial' },
 ]

src/pages/honkai3rd/battlesuits/index.tsx

@@ -21,35 +21,33 @@ interface BattlesuitListPageProps {
   battlesuits: BattlesuitListItemData[]
 }
 
-const featureFilterOptions = [
+const featureFilterOptions: { value: string; label: string; icon?: string }[] =
-  { value: 'all', label: 'All' },
+  [{ value: 'all', label: 'All' }, ...battlesuitStrengths]
-  ...battlesuitStrengths,
-]
 
 const valkyrieFilterOptions = [
   { value: 'all', label: 'All' },
-  { value: 'mecha', label: 'Mecha' },
+  { value: 'mecha', icon: 'type-icons/mecha', label: 'Mecha' },
-  { value: 'biologic', label: 'Biologic' },
+  { value: 'biologic', icon: 'type-icons/biologic', label: 'Biologic' },
-  { value: 'psychic', label: 'Psychic' },
+  { value: 'psychic', icon: 'type-icons/psychic', label: 'Psychic' },
-  { value: 'quantum', label: 'Quantum' },
+  { value: 'quantum', icon: 'type-icons/quantum', label: 'Quantum' },
-  { value: 'imaginary', label: 'Imaginary' },
+  { value: 'imaginary', icon: 'type-icons/imaginary', label: 'Imaginary' },
-  { value: 'kiana', label: 'Kiana' },
+  { value: 'kiana', icon: 'valkyrie-icons/kiana', label: 'Kiana' },
-  { value: 'mei', label: 'Mei' },
+  { value: 'mei', icon: 'valkyrie-icons/mei', label: 'Mei' },
-  { value: 'bronya', label: 'Bronya' },
+  { value: 'bronya', icon: 'valkyrie-icons/bronya', label: 'Bronya' },
-  { value: 'himeko', label: 'Himeko' },
+  { value: 'himeko', icon: 'valkyrie-icons/himeko', label: 'Himeko' },
-  { value: 'theresa', label: 'Theresa' },
+  { value: 'theresa', icon: 'valkyrie-icons/theresa', label: 'Theresa' },
-  { value: 'fuhua', label: 'Fu Hua' },
+  { value: 'fuhua', icon: 'valkyrie-icons/fuhua', label: 'Fu Hua' },
-  { value: 'rita', label: 'Rita' },
+  { value: 'rita', icon: 'valkyrie-icons/rita', label: 'Rita' },
-  { value: 'sakura', label: 'Sakura' },
+  { value: 'sakura', icon: 'valkyrie-icons/sakura', label: 'Sakura' },
-  { value: 'kallen', label: 'Kallen' },
+  { value: 'kallen', icon: 'valkyrie-icons/kallen', label: 'Kallen' },
-  { value: 'olenyevas', label: 'Olenyevas' },
+  { value: 'olenyevas', icon: 'valkyrie-icons/olenyevas', label: 'Olenyevas' },
-  { value: 'seele', label: 'Seele' },
+  { value: 'seele', icon: 'valkyrie-icons/seele', label: 'Seele' },
-  { value: 'durandal', label: 'Durandal' },
+  { value: 'durandal', icon: 'valkyrie-icons/durandal', label: 'Durandal' },
-  { value: 'fischl', label: 'Fischl' },
+  { value: 'fischl', icon: 'valkyrie-icons/fischl', label: 'Fischl' },
-  { value: 'elysia', label: 'Elysia' },
+  { value: 'elysia', icon: 'valkyrie-icons/elysia', label: 'Elysia' },
-  { value: 'mobius', label: 'Mobius' },
+  { value: 'mobius', icon: 'valkyrie-icons/mobius', label: 'Mobius' },
-  { value: 'raven', label: 'Raven' },
+  { value: 'raven', icon: 'valkyrie-icons/raven', label: 'Raven' },
-  { value: 'carole', label: 'Carole' },
+  { value: 'carole', icon: 'valkyrie-icons/carole', label: 'Carole' },
 ]
 
 const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
@@ -125,7 +123,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
         <Box>
           <Heading as='h3'>Filter by Features</Heading>
           <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-            {featureFilterOptions.map(({ value, label }) => {
+            {featureFilterOptions.map(({ value, label, icon }) => {
               return (
                 <FilterButton
                   key={value}
@@ -133,6 +131,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                   setFilter={setFilter}
                   value={value}
                   label={label}
+                  icon={icon}
                   m={1}
                 />
               )
@@ -141,7 +140,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
 
           <Heading as='h3'>Filter by Valkyries</Heading>
           <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-            {valkyrieFilterOptions.map(({ value, label }) => {
+            {valkyrieFilterOptions.map(({ value, label, icon }) => {
               return (
                 <FilterButton
                   key={value}
@@ -149,6 +148,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                   setFilter={setFilter}
                   value={value}
                   label={label}
+                  icon={icon}
                   m={1}
                 />
               )