feat : add elemental ickn

components/public/structured-guide.tsx

@@ -20,11 +20,13 @@ import { GuideImageExport } from "@/components/public/guide-image-export";
 import { ConstellationImage } from "@/components/public/constellation-image";
 import { LiveRefresh } from "@/components/live-refresh";
 import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
+import { elementIconFilter } from "@/lib/catalog/element";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { artifactTierCount } from "@/lib/guides/artifacts";
 import { navigationIconPath } from "@/lib/navigation";
 import {
   normalizeTargetStat,
+  recommendedStatElement,
   recommendedStatIconName,
   statPriorityColorClass,
   targetStatIconName,
@@ -504,18 +506,21 @@ function ArtifactSectionContent({
                   label="นาฬิกา"
                   values={profile.sands}
                   exporting={exporting}
+                  elementIconUrls={guide.elementIconUrls}
                 />
                 <ArtifactStat
                   iconSrc="/icon/Icon_Goblet_of_Eonothem.webp"
                   label="ถ้วย"
                   values={profile.goblet}
                   exporting={exporting}
+                  elementIconUrls={guide.elementIconUrls}
                 />
                 <ArtifactStat
                   iconSrc="/icon/Icon_Circlet_of_Logos.webp"
                   label="หัว"
                   values={profile.circlet}
                   exporting={exporting}
+                  elementIconUrls={guide.elementIconUrls}
                 />
               </CardContent>
             </Card>
@@ -531,6 +536,7 @@ function ArtifactSectionContent({
                       value={stat}
                       index={index}
                       exporting={exporting}
+                      elementIconUrls={guide.elementIconUrls}
                     />
                   ))}
                 </div>
@@ -804,11 +810,13 @@ function ArtifactStat({
   label,
   values,
   exporting = false,
+  elementIconUrls,
 }: {
   iconSrc: string;
   label: string;
   values: string[];
   exporting?: boolean;
+  elementIconUrls: Record<string, string>;
 }) {
   return (
     <div
@@ -842,6 +850,7 @@ function ArtifactStat({
               value={value}
               index={index}
               exporting={exporting}
+              elementIconUrls={elementIconUrls}
             />
           ))
         ) : (
@@ -856,12 +865,16 @@ function ArtifactStatValue({
   value,
   index,
   exporting = false,
+  elementIconUrls,
 }: {
   value: string;
   index: number;
   exporting?: boolean;
+  elementIconUrls: Record<string, string>;
 }) {
   const iconName = recommendedStatIconName(value);
+  const element = recommendedStatElement(value);
+  const elementIconUrl = element ? elementIconUrls[element] : null;
   const hasIcon = Boolean(iconName);
   return (
     <span
@@ -870,7 +883,17 @@ function ArtifactStatValue({
         statPriorityColorClass(index),
       )}
     >
-      {hasIcon ? (
+      {elementIconUrl ? (
+        <Image
+          src={elementIconUrl}
+          alt=""
+          width={20}
+          height={20}
+          loading={exporting ? "eager" : undefined}
+          className="size-5 shrink-0 object-contain"
+          style={{ filter: elementIconFilter(element!) }}
+        />
+      ) : hasIcon ? (
         <Image
           src={`/icon/stats/${iconName}.${iconName === "elemental-bonus" ? "svg" : "webp"}`}
           alt=""