Give default dimensions to svg icons

Author: Rikthepixel

src/components/controls/Button.tsx

@@ -59,7 +59,11 @@ const Button = forwardRef(({ className, color, loading, children, disabled, ...p
           animate="anim"
           exit="exit"
         >
-          <ArrowPathIcon className="w-[1em] h-[1em] animate-spin" />
+          <ArrowPathIcon
+            className="w-[1em] h-[1em] animate-spin"
+            width="1em"
+            height="1em"
+          />
         </motion.span>}
       </AnimatePresence>
     </button>

src/components/controls/Select.tsx

@@ -110,7 +110,11 @@ const Select = forwardRef(<TOption extends any>(
         {({ open }) => (
           <>
             {getDisplayName(value)}
-            <ChevronDownIcon className="inline w-4 h-4 ml-2 motion-safe:transition-transform ui-open:rotate-180" />
+            <ChevronDownIcon
+              className="inline w-4 h-4 ml-2 motion-safe:transition-transform ui-open:rotate-180"
+              width="1em"
+              height="1em"
+            />
             <AnimatePresence>
               {open && <motion.div
                 key="options"

src/components/navigation/Header.tsx

@@ -43,7 +43,11 @@ const Header = () => {
         aria-controls="header-items"
         onClick={() => setOpen(!open)}
       >
-        <Bars3Icon className="w-6 h-6" />
+        <Bars3Icon
+          className="w-6 h-6"
+          width="1em"
+          height="1em"
+        />
       </Button>
       <div
         ref={itemsContainerRef}

src/components/navigation/NavDropdown.tsx

@@ -52,6 +52,8 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
         <ChevronDownIcon
           className="w-5 h-5 data-[open='true']:rotate-180 transition-all"
           data-open={open}
+          width="1em"
+          height="1em"
         />
       </summary>
       <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 bg-white border-2 rounded-lg group/dropdown border-primary md:w-fit" data-in-group>

src/components/pages/blog/ArticleBrief.tsx

@@ -111,12 +111,20 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, readtime, teaser, author
           </AuthorTag>
           <Link href={url} color="fill-contrast" className="flex items-center gap-4 text-sm">
             {safeToRender && <div className="flex items-center gap-2">
-              <BookIcon className="w-4 h-4" />
+              <BookIcon
+                className="w-4 h-4"
+                width="1em"
+                height="1em"
+              />
               {readtimeFormatter.format(readtime)}
             </div>}
             <div className="hidden w-1 h-1 rounded-full bg-neutral-600 md:block" />
             {safeToRender && <div className="flex items-center gap-2">
-              <CalendarIcon className="w-4 h-4" />
+              <CalendarIcon
+                className="w-4 h-4"
+                width="1em"
+                height="1em"
+              />
               {(new Date(date)).toLocaleDateString()}
             </div>}
           </Link>

src/components/pages/blog/post/ArticleMeta.tsx

@@ -49,7 +49,11 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
       {DotSeparator}
       <div className="flex items-center gap-4 text-sm">
         {safeToRender && <div className="flex items-center gap-2">
-          <BookIcon className="w-4 h-4" />
+          <BookIcon
+            className="w-4 h-4"
+            width="1em"
+            height="1em"
+          />
           <time
             aria-label="reading time"
             dateTime={`${readtime} minutes`}
@@ -59,7 +63,11 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
         </div>}
         {DotSeparator}
         {safeToRender && <div className="flex items-center gap-2">
-          <CalendarIcon className="w-4 h-4" />
+          <CalendarIcon
+            className="w-4 h-4"
+            width="1em"
+            height="1em"
+          />
           <time aria-label="Date created" dateTime={created} className={`${updated ? "hidden" : ""}`}>
             {(new Date(created)).toLocaleDateString()}
           </time>

src/components/pages/front/SignupSection.tsx

@@ -63,7 +63,11 @@ const SignupSection = () => {
       <ul aria-label="Perks" className="flex flex-wrap justify-center w-full gap-4" >
         {perks.map(({ title, icon: Icon }, i) => (
           <li key={i} className="flex flex-col items-center w-32 gap-2">
-            <Icon className="w-12 sm:w-16 text-primary" />
+            <Icon
+              className="w-12 sm:w-16 text-primary"
+              width="1em"
+              height="1em"
+            />
             <div className="font-bold">{title}</div>
           </li>
         ))}

src/pages/404.tsx

@@ -28,11 +28,19 @@ const NotFound: Page = ({ pathname }) => {
           <p>There are no commits to be found here!</p>
           <div className="grid grid-cols-2 gap-2 mt-4">
             <LinkButton href="/" color="secondary">
-              <HomeModernIcon className="w-4" />
+              <HomeModernIcon
+                className="w-4"
+                width="1em"
+                height="1em"
+              />
               Home
             </LinkButton>
             <Button onClick={() => router.back()} color="secondary">
-              <ArrowUturnLeftIcon className="w-4" />
+              <ArrowUturnLeftIcon
+                className="w-4"
+                width="1em"
+                height="1em"
+              />
               Back
             </Button>
           </div>

src/pages/mail/unsubscribe.tsx

@@ -76,7 +76,11 @@ const UnsubscribePage: Page = ({ pathname }) => {
           <Button type="submit" color="secondary">
             {!loading
               ? "Unsubscribe"
-              : <ArrowPathIcon className="w-6 h-6 animate-spin" />
+              : <ArrowPathIcon
+                className="w-6 h-6 animate-spin"
+                width="1em"
+                height="1em"
+              />
             }
           </Button>
         </Form>

src/utils/swal.tsx

@@ -3,7 +3,11 @@ import withReactContent from "sweetalert2-react-content";
 import CloseIcon from "@heroicons/react/24/solid/XMarkIcon";
 
 const swal = withReactContent(Swal).mixin({
-  closeButtonHtml: <CloseIcon className="w-6 h-6" />,
+  closeButtonHtml: <CloseIcon
+    className="w-6 h-6"
+    width="1em"
+    height="1em"
+  />,
   customClass: {
     icon: "mr-4"
   }