fix: ability and skill icon

NieR-Rein-Guide · Feb 16, 2023 · 3345e39 · 3345e39
1 parent 9845b8c
commit 3345e39
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/components/Ability.tsx b/src/components/Ability.tsx
@@ -70,10 +70,19 @@ export default function Ability({
             href ? "cursor-pointer hover:scale-105 transition transform" : ""
           )}
         >
-          <SVG
-            src="/decorations/frame-ability.svg"
-            className={classNames(isSmall ? "h-12 w-12" : "h-16 w-16")}
-          />
+          <div
+            className={classNames(
+              "relative",
+              isSmall ? "h-12 w-12" : "h-16 w-16"
+            )}
+          >
+            <SVG
+              height={isSmall ? "48" : "64"}
+              width={isSmall ? "48" : "64"}
+              src="/decorations/frame-ability.svg"
+              className="absolute inset-0"
+            />
+          </div>
           <div
             className={classNames(
               "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center",
@@ -84,11 +93,9 @@ export default function Ability({
           </div>
 
           {href && !fullLink && (
-            (<Link href={href} passHref className="absolute inset-0 z-10">
-
+            <Link href={href} passHref className="absolute inset-0 z-10">
               <span className="sr-only">See ability {name}</span>
-
-            </Link>)
+            </Link>
           )}
         </div>
         <div className="flex flex-col items-start">

diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
@@ -47,12 +47,14 @@ export default function Skill({
       </span>
       <div className="flex flex-col md:flex-row items-center">
         <div className="relative mr-4">
-          <SVG
-            height="96"
-            width="96"
-            src="/decorations/frame.svg"
-            className="h-24 w-24"
-          />
+          <div className="relative h-24 w-24">
+            <SVG
+              height="96"
+              width="96"
+              src="/decorations/frame.svg"
+              className="absolute inset-0"
+            />
+          </div>
           <div className="h-16 w-16 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
             <Image
               layout="fixed"