From bad4397b322abf6032731e89459b9de9d595ed64 Mon Sep 17 00:00:00 2001
From: Sakura Knoll <s4kura.knoll@gmail.com>
Date: Fri, 31 Dec 2021 18:19:06 +0900
Subject: [PATCH] Add icon image to valkyrie label

---
 src/components/atoms/ValkyrieLabel.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/atoms/ValkyrieLabel.tsx b/src/components/atoms/ValkyrieLabel.tsx
index bed1c024..7207bede 100644
--- a/src/components/atoms/ValkyrieLabel.tsx
+++ b/src/components/atoms/ValkyrieLabel.tsx
@@ -1,12 +1,25 @@
-import { Text } from '@theme-ui/components'
+import { Flex, Text } from '@theme-ui/components'
+import SquareImageBox from './SquareImageBox'
 
 interface ValkyrieLabelProps {
   valkyrie: string
 }
 
 const ValkyrieLabel = ({ valkyrie }: ValkyrieLabelProps) => {
-  const { label } = getLabelData(valkyrie)
-  return <Text>{label}</Text>
+  const { icon, label } = getLabelData(valkyrie)
+  return (
+    <Flex sx={{ alignItems: 'center' }}>
+      {icon && (
+        <SquareImageBox
+          size={30}
+          src={`/assets/honkai3rd/valkyrie-icons/${icon}.png`}
+          alt={label}
+          mr={1}
+        />
+      )}
+      <Text>{label}</Text>
+    </Flex>
+  )
 }
 
 export default ValkyrieLabel
@@ -32,7 +45,7 @@ function getLabelData(valkyrie: string): { label: string; icon?: string } {
     case 'kallen':
       return { icon: 'kallen', label: 'Kallen Kaslana' }
     case 'olenyevas':
-      return { icon: 'olenyevas', label: 'Olenyevas Sisters' }
+      return { icon: 'olenyevas', label: 'Olenyevas' }
     case 'seele':
       return { icon: 'seele', label: 'Seele Vollerei' }
     case 'durandal':