feat(icon component and dev route): implement custom icon set, compon…

…ent and page for icon selection Added a custom icon library for use with the Icon ui component. Usage: <Icon name="close" className="w-9" />
chingu-voyages · Oct 21, 2023 · 8666517 · 8666517
1 parent b6243cb
commit 8666517
Show file tree

Hide file tree

Showing 28 changed files with 425 additions and 8 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import {
   About,
   RecipesPage,
   RecipeDetailsPage,
+  IconsDevPage,
 } from "@/pages";
 // Please keep on when possible to avoid using up our Tasty API free quota
 // All api calls will be intercepted and fulfilled by the mirage server.
@@ -27,6 +28,7 @@ function App() {
         <Route path="/posts/:postId" element={<PostDetail />} />
         <Route path="/recipes" element={<RecipesPage />} />
         <Route path="/recipes/:recipesId" element={<RecipeDetailsPage />} />
+        <Route path="/dev/icons" element={<IconsDevPage />} />
       </Route>
     </Routes>
   );

diff --git a/src/assets/icons/Close.jsx b/src/assets/icons/Close.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M72.4538 63.9949L110.226 26.2782C111.355 25.1491 111.99 23.6176 111.99 22.0208C111.99 20.424 111.355 18.8926 110.226 17.7634C109.098 16.6343 107.566 16 105.97 16C104.373 16 102.842 16.6343 101.713 17.7634L64.0001 55.5401L26.2874 17.7634C25.1584 16.6343 23.6271 16 22.0304 16C20.4338 16 18.9025 16.6343 17.7735 17.7634C16.6445 18.8926 16.0102 20.424 16.0102 22.0208C16.0102 23.6176 16.6445 25.1491 17.7735 26.2782L55.5462 63.9949L17.7735 101.712C17.2115 102.269 16.7655 102.932 16.4611 103.663C16.1567 104.394 16 105.177 16 105.969C16 106.76 16.1567 107.544 16.4611 108.275C16.7655 109.005 17.2115 109.669 17.7735 110.226C18.3309 110.788 18.994 111.234 19.7246 111.539C20.4553 111.843 21.2389 112 22.0304 112C22.8219 112 23.6056 111.843 24.3363 111.539C25.0669 111.234 25.73 110.788 26.2874 110.226L64.0001 72.4496L101.713 110.226C102.27 110.788 102.933 111.234 103.664 111.539C104.395 111.843 105.178 112 105.97 112C106.762 112 107.545 111.843 108.276 111.539C109.006 111.234 109.669 110.788 110.226 110.226C110.789 109.669 111.235 109.005 111.539 108.275C111.844 107.544 112 106.76 112 105.969C112 105.177 111.844 104.394 111.539 103.663C111.235 102.932 110.789 102.269 110.226 101.712L72.4538 63.9949Z" />
+);
diff --git a/src/assets/icons/DownArrow.jsx b/src/assets/icons/DownArrow.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M112 64L101.88 53.8804L71.1567 84.6041V16H56.8433V84.6041L26.1196 53.8804L16 64L64 112L112 64Z" />
+);
diff --git a/src/assets/icons/Flame.jsx b/src/assets/icons/Flame.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M61.7748 11.155L54.8379 7L53.5166 14.9742C51.4135 27.5657 42.8084 39.2656 33.3169 47.4875C14.7359 63.59 10.6673 81.0904 16.4206 95.5364C21.9261 109.361 35.899 118.826 50.0812 120.406L53.3624 120.769C45.2473 115.81 40.0391 104.226 41.856 95.5695C43.6507 87.0614 49.7729 79.0927 61.5326 71.7403L67.462 68.0421L69.6752 74.6736C70.98 78.5919 73.2373 81.7397 75.5331 84.9371C76.6342 86.4781 77.7518 88.0355 78.7758 89.692C82.3159 95.4429 83.2518 101.838 80.967 108.183C78.8859 113.95 75.4505 118.485 70.7268 121L76.0671 120.406C89.3794 118.925 99.1517 114.374 105.5 106.763C111.792 99.2181 114 89.5049 114 79.1642C114 69.5335 110.042 59.6056 105.373 51.3453C99.9004 41.6705 92.7598 33.6358 84.964 25.8487C83.6152 28.5453 83.7198 29.6349 80.945 33.966C77.3432 24.4002 70.5795 16.3518 61.7748 11.155Z" />
+);
diff --git a/src/assets/icons/GreenDot.jsx b/src/assets/icons/GreenDot.jsx
@@ -0,0 +1,34 @@
+export default (
+  <>
+    <g clipPath="url(#clip0_475_25132)">
+      <path
+        d="M109.243 109.245C134.231 84.2567 134.231 43.7433 109.243 18.7554C84.2547 -6.23254 43.7413 -6.23254 18.7534 18.7554C-6.2345 43.7433 -6.2345 84.2567 18.7534 109.245C43.7413 134.233 84.2547 134.233 109.243 109.245Z"
+        fill="url(#paint0_radial_475_25132)"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="paint0_radial_475_25132"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#0DE831" />
+        <stop offset="0.208333" stopColor="#00B31E" />
+        <stop offset="0.4" stopColor="#009419" />
+        <stop offset="0.5" stopColor="#008516" />
+        <stop offset="0.6" stopColor="#007013" />
+        <stop offset="0.703125" stopColor="#00520E" />
+        <stop offset="0.770833" stopColor="#03420E" />
+        <stop offset="0.791667" stopColor="#043E0E" />
+        <stop offset="0.95" stopColor="#005C0F" />
+        <stop offset="1" stopColor="#008015" />
+      </radialGradient>
+      <clipPath id="clip0_475_25132">
+        <rect width="128" height="128" fill="white" />
+      </clipPath>
+    </defs>
+  </>
+);
diff --git a/src/assets/icons/Hamburger.jsx b/src/assets/icons/Hamburger.jsx
@@ -0,0 +1,7 @@
+export default (
+  <>
+    <path d="M16 33.2812C16 30.3645 18.3645 28 21.2812 28H106.719C109.636 28 112 30.3645 112 33.2812C112 36.1979 109.636 38.5623 106.719 38.5623H21.2812C18.3645 38.5623 16 36.1979 16 33.2812Z" />
+    <path d="M16 63.7948C16 60.8781 18.3645 58.5137 21.2812 58.5137H106.719C109.636 58.5137 112 60.8781 112 63.7948C112 66.7115 109.636 69.076 106.719 69.076H21.2812C18.3645 69.076 16 66.7115 16 63.7948Z" />
+    <path d="M16 94.3085C16 91.3918 18.3645 89.0273 21.2812 89.0273H106.719C109.636 89.0273 112 91.3918 112 94.3085C112 97.2252 109.636 99.5897 106.719 99.5897H21.2812C18.3645 99.5897 16 97.2252 16 94.3085Z" />
+  </>
+);
diff --git a/src/assets/icons/Icon.jsx b/src/assets/icons/Icon.jsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import { icons } from "./iconList.js";
+
+export default function Icon({ name, className, color, ...props }) {
+  name = name[0].toUpperCase() + name.slice(1);
+  name = name.replace(/-[A-Za-z]/g, (m) => m[1].toUpperCase());
+  if (!icons[name]) return null;
+  if (!className || className.indexOf("w-") === -1) className += " w-[.8em]";
+  return (
+    <span className={`inline-block ${className}`}>
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 128 128"
+        fill={color || "currentColor"}
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        {...props}
+      >
+        {icons[name]}
+      </svg>
+    </span>
+  );
+}
diff --git a/src/assets/icons/LeftArrow.jsx b/src/assets/icons/LeftArrow.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M64 112L74.1196 101.88L43.3959 71.1567L112 71.1567L112 56.8433L43.3959 56.8433L74.1196 26.1196L64 16L16 64L64 112Z" />
+);
diff --git a/src/assets/icons/OrangeDot.jsx b/src/assets/icons/OrangeDot.jsx
@@ -0,0 +1,78 @@
+export default (
+  <>
+    <g clipPath="url(#clip0_475_25141)">
+      <path
+        d="M109.243 109.245C134.231 84.2567 134.231 43.7433 109.243 18.7554C84.2547 -6.23254 43.7413 -6.23254 18.7534 18.7554C-6.2345 43.7433 -6.2345 84.2567 18.7534 109.245C43.7413 134.233 84.2547 134.233 109.243 109.245Z"
+        fill="url(#paint1_radial_475_25141)"
+      />
+      <g style={{ mixBlendMode: "multiply" }}>
+        <path
+          d="M109.243 109.245C134.231 84.2567 134.231 43.7433 109.243 18.7554C84.2552 -6.23254 43.7418 -6.23254 18.7539 18.7554C-6.23401 43.7433 -6.23401 84.2567 18.7539 109.245C43.7418 134.233 84.2552 134.233 109.243 109.245Z"
+          fill="url(#paint2_radial_475_25141)"
+        />
+      </g>
+    </g>
+    <defs>
+      <radialGradient
+        id="paint0_radial_475_25141"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#F9FFB0" />
+        <stop offset="0.41" stopColor="#FFEA00" />
+        <stop offset="0.49" stopColor="#FFE500" />
+        <stop offset="0.58" stopColor="#FFD600" />
+        <stop offset="0.68" stopColor="#FFBE00" />
+        <stop offset="0.78" stopColor="#FF9D00" />
+        <stop offset="0.81" stopColor="#FF9500" />
+        <stop offset="0.89" stopColor="#FF9B00" />
+        <stop offset="1" stopColor="#FFAA00" />
+      </radialGradient>
+      <radialGradient
+        id="paint1_radial_475_25141"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#FFDA91" />
+        <stop offset="0.31" stopColor="#FF6A00" />
+        <stop offset="0.4" stopColor="#FA6800" />
+        <stop offset="0.5" stopColor="#EC6200" />
+        <stop offset="0.6" stopColor="#D65900" />
+        <stop offset="0.71" stopColor="#B64C00" />
+        <stop offset="0.82" stopColor="#913C00" />
+        <stop offset="0.8499" stopColor="#974100" />
+        <stop offset="0.85" stopColor="#973F00" />
+        <stop offset="0.9" stopColor="#A84600" />
+        <stop offset="0.95" stopColor="#C45200" />
+        <stop offset="1" stopColor="#E86100" />
+      </radialGradient>
+      <radialGradient
+        id="paint2_radial_475_25141"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8005 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#F9FFB0" />
+        <stop offset="0.41" stopColor="#FFEA00" />
+        <stop offset="0.49" stopColor="#FFE500" />
+        <stop offset="0.58" stopColor="#FFD600" />
+        <stop offset="0.68" stopColor="#FFBE00" />
+        <stop offset="0.78" stopColor="#FF9D00" />
+        <stop offset="0.81" stopColor="#FF9500" />
+        <stop offset="0.89" stopColor="#FF9B00" />
+        <stop offset="1" stopColor="#FFAA00" />
+      </radialGradient>
+      <clipPath id="clip0_475_25141">
+        <rect width="128" height="128" fill="white" />
+      </clipPath>
+    </defs>
+  </>
+);
diff --git a/src/assets/icons/Oven.jsx b/src/assets/icons/Oven.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M12 32.0556C12 27.2669 13.9023 22.6744 17.2883 19.2883C20.6744 15.9023 25.2669 14 30.0556 14H93.9444C98.7331 14 103.326 15.9023 106.712 19.2883C110.098 22.6744 112 27.2669 112 32.0556V44.5556H12V32.0556ZM39.7778 36.2222C41.2512 36.2222 42.6643 35.6369 43.7061 34.595C44.748 33.5532 45.3333 32.1401 45.3333 30.6667C45.3333 29.1932 44.748 27.7802 43.7061 26.7383C42.6643 25.6964 41.2512 25.1111 39.7778 25.1111C38.3044 25.1111 36.8913 25.6964 35.8494 26.7383C34.8075 27.7802 34.2222 29.1932 34.2222 30.6667C34.2222 32.1401 34.8075 33.5532 35.8494 34.595C36.8913 35.6369 38.3044 36.2222 39.7778 36.2222ZM67.5556 30.6667C67.5556 29.1932 66.9702 27.7802 65.9284 26.7383C64.8865 25.6964 63.4734 25.1111 62 25.1111C60.5266 25.1111 59.1135 25.6964 58.0716 26.7383C57.0298 27.7802 56.4444 29.1932 56.4444 30.6667C56.4444 32.1401 57.0298 33.5532 58.0716 34.595C59.1135 35.6369 60.5266 36.2222 62 36.2222C63.4734 36.2222 64.8865 35.6369 65.9284 34.595C66.9702 33.5532 67.5556 32.1401 67.5556 30.6667ZM89.7778 30.6667C89.7778 29.1932 89.1925 27.7802 88.1506 26.7383C87.1087 25.6964 85.6956 25.1111 84.2222 25.1111C82.7488 25.1111 81.3357 25.6964 80.2938 26.7383C79.252 27.7802 78.6667 29.1932 78.6667 30.6667C78.6667 32.1401 79.252 33.5532 80.2938 34.595C81.3357 35.6369 82.7488 36.2222 84.2222 36.2222C85.6956 36.2222 87.1087 35.6369 88.1506 34.595C89.1925 33.5532 89.7778 32.1401 89.7778 30.6667ZM12 95.9444V52.8889H112V95.9444C112 100.733 110.098 105.326 106.712 108.712C103.326 112.098 98.7331 114 93.9444 114H30.0556C25.2669 114 20.6744 112.098 17.2883 108.712C13.9023 105.326 12 100.733 12 95.9444ZM35.6111 64C31.7778 64 28.6667 67.1111 28.6667 70.9444V90.3889C28.6667 94.2222 31.7778 97.3333 35.6111 97.3333H88.3889C92.2222 97.3333 95.3333 94.2222 95.3333 90.3889V70.9444C95.3333 67.1111 92.2222 64 88.3889 64H35.6111Z" />
+);
diff --git a/src/assets/icons/OvenMitt.jsx b/src/assets/icons/OvenMitt.jsx
@@ -0,0 +1,7 @@
+export default (
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M41.9403 103.34L24.0901 86.0429C17.37 79.5306 14 76.2695 14 72.2204C14 69.559 15.45 67.2396 18.35 64.1172C21.3001 60.9305 22.7801 59.3396 23.4501 57.6744C24.1151 56.0091 24.1351 54.1357 24.1701 50.3889L24.3301 33.8258C24.1601 23.0067 31.2052 14.1353 40.0652 14.0015C47.3403 13.8925 53.5754 19.7109 55.6704 27.7794L58.0004 25.5194C70.8105 13.1045 91.5807 13.1045 104.391 25.5194C107.431 28.437 109.848 31.9306 111.499 35.7925C113.149 39.6544 114 43.8059 114 48.0001C114 52.1943 113.149 56.3458 111.499 60.2077C109.848 64.0696 107.431 67.5632 104.391 70.4808L70.4905 103.34C63.7605 109.862 60.3904 113.123 56.2154 113.123C52.0304 113.123 48.6653 109.862 41.9403 103.34ZM33.9002 67.8838C34.5953 67.1798 35.544 66.7781 36.5378 66.7669C37.5316 66.7558 38.4892 67.1361 39.2002 67.8244L60.6154 88.5754C61.3121 89.2674 61.7058 90.2035 61.7111 91.1811C61.7164 92.1587 61.333 93.099 60.6439 93.7984C59.9548 94.4977 59.0154 94.8998 58.0293 94.9176C57.0432 94.9354 56.0897 94.5674 55.3754 93.8933L33.9602 73.1422C33.2499 72.4532 32.8446 71.5129 32.8334 70.5278C32.8221 69.5428 33.2058 68.5936 33.9002 67.8888V67.8838Z"
+  />
+);
diff --git a/src/assets/icons/RedDot.jsx b/src/assets/icons/RedDot.jsx
@@ -0,0 +1,35 @@
+export default (
+  <>
+    <g clipPath="url(#clip0_475_25150)">
+      <path
+        d="M109.243 109.245C134.231 84.2567 134.231 43.7433 109.243 18.7554C84.2548 -6.23255 43.7413 -6.23255 18.7534 18.7554C-6.2345 43.7433 -6.2345 84.2567 18.7534 109.245C43.7413 134.233 84.2548 134.233 109.243 109.245Z"
+        fill="url(#paint0_radial_475_25150)"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="paint0_radial_475_25150"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#FFAC91" />
+        <stop offset="0.31" stopColor="#FF0000" />
+        <stop offset="0.4" stopColor="#FA0000" />
+        <stop offset="0.5" stopColor="#EC0000" />
+        <stop offset="0.6" stopColor="#D60000" />
+        <stop offset="0.71" stopColor="#B60000" />
+        <stop offset="0.82" stopColor="#910000" />
+        <stop offset="0.85" stopColor="#970000" />
+        <stop offset="0.9" stopColor="#A80000" />
+        <stop offset="0.95" stopColor="#C40000" />
+        <stop offset="1" stopColor="#E80000" />
+      </radialGradient>
+      <clipPath id="clip0_475_25150">
+        <rect width="128" height="128" fill="white" />
+      </clipPath>
+    </defs>
+  </>
+);
diff --git a/src/assets/icons/RightArrow.jsx b/src/assets/icons/RightArrow.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M64 16L53.8804 26.1196L84.6041 56.8433L16 56.8433V71.1567H84.6041L53.8804 101.88L64 112L112 64L64 16Z" />
+);
diff --git a/src/assets/icons/Search.jsx b/src/assets/icons/Search.jsx
@@ -0,0 +1,14 @@
+export default (
+  <>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M55.9599 29.8571C37.0857 29.8571 22.3804 44.0424 22.3804 60.8335C22.3804 77.6246 37.0857 91.8099 55.9599 91.8099C74.834 91.8099 89.5394 77.6246 89.5394 60.8335C89.5394 44.0424 74.834 29.8571 55.9599 29.8571ZM11.9561 60.8335C11.9561 37.676 31.9859 19.4766 55.9599 19.4766C79.9338 19.4766 99.9637 37.676 99.9637 60.8335C99.9637 83.991 79.9338 102.19 55.9599 102.19C31.9859 102.19 11.9561 83.991 11.9561 60.8335Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M85.4049 88.2865C87.3723 86.194 90.6707 86.0859 92.772 88.045L109.397 103.545C111.498 105.504 111.607 108.789 109.64 110.881C107.672 112.974 104.374 113.082 102.272 111.123L85.6474 95.6227C83.5461 93.6636 83.4375 90.379 85.4049 88.2865Z"
+    />
+  </>
+);
diff --git a/src/assets/icons/Smile.jsx b/src/assets/icons/Smile.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M64 10C35.2742 10 12 34.1694 12 64C12 93.8306 35.2742 118 64 118C92.7258 118 116 93.8306 116 64C116 34.1694 92.7258 10 64 10ZM80.7742 46.5806C84.4855 46.5806 87.4839 49.6944 87.4839 53.5484C87.4839 57.4024 84.4855 60.5161 80.7742 60.5161C77.0629 60.5161 74.0645 57.4024 74.0645 53.5484C74.0645 49.6944 77.0629 46.5806 80.7742 46.5806ZM47.2258 46.5806C50.9371 46.5806 53.9355 49.6944 53.9355 53.5484C53.9355 57.4024 50.9371 60.5161 47.2258 60.5161C43.5145 60.5161 40.5161 57.4024 40.5161 53.5484C40.5161 49.6944 43.5145 46.5806 47.2258 46.5806ZM88.071 83.6403C82.0952 91.0871 73.3306 95.3548 64 95.3548C54.6694 95.3548 45.9048 91.0871 39.929 83.6403C37.0774 80.0911 42.2355 75.6492 45.0871 79.1766C49.7839 85.0339 56.6613 88.3653 64 88.3653C71.3387 88.3653 78.2161 85.0121 82.9129 79.1766C85.7226 75.6492 90.9016 80.0911 88.071 83.6403Z" />
+);
diff --git a/src/assets/icons/Stars.jsx b/src/assets/icons/Stars.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M103.273 0L96.1136 16L80.5455 23.2727L96.1136 30.6036L103.273 46.5455L110.375 30.6036L126 23.2727L110.375 16M46.4545 17.4545L32.25 49.4545L1 64L32.25 78.5455L46.4545 110.545L60.6591 78.5455L91.9091 64L60.6591 49.4545M103.273 81.4545L96.1136 97.3964L80.5455 104.727L96.1136 112L103.273 128L110.375 112L126 104.727L110.375 97.3964" />
+);
diff --git a/src/assets/icons/Stir.jsx b/src/assets/icons/Stir.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M82.4889 42.1899L106.667 0L118.756 7.15084L98.8444 42.1899H82.4889ZM78.2222 49.3408H0V63.6425H14.2222V113.698C14.2222 121.564 20.6222 128 28.4444 128H99.5556C107.378 128 113.778 121.564 113.778 113.698V63.6425H128V49.3408H78.2222Z" />
+);
diff --git a/src/assets/icons/Thermometer.jsx b/src/assets/icons/Thermometer.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M78.6163 68.8V30.4C78.6163 26.5809 77.1302 22.9182 74.4847 20.2177C71.8393 17.5171 68.2514 16 64.5102 16C60.769 16 57.1811 17.5171 54.5357 20.2177C51.8903 22.9182 50.4041 26.5809 50.4041 30.4V68.8C46.4566 71.8223 43.5407 76.0359 42.0694 80.844C40.5981 85.652 40.6461 90.8108 42.2065 95.5895C43.7669 100.368 46.7606 104.525 50.7635 107.47C54.7665 110.415 59.5758 112 64.5102 112C69.4446 112 74.2539 110.415 78.2569 107.47C82.2598 104.525 85.2535 100.368 86.8139 95.5895C88.3743 90.8108 88.4223 85.652 86.951 80.844C85.4797 76.0359 82.5638 71.8223 78.6163 68.8ZM64.5102 25.6C65.7573 25.6 66.9532 26.1057 67.835 27.0059C68.7169 27.9061 69.2122 29.127 69.2122 30.4V44.8H59.8082V30.4C59.8082 29.127 60.3036 27.9061 61.1854 27.0059C62.0672 26.1057 63.2631 25.6 64.5102 25.6Z" />
+);
diff --git a/src/assets/icons/UpArrow.jsx b/src/assets/icons/UpArrow.jsx
@@ -0,0 +1,3 @@
+export default (
+  <path d="M16 64L26.1196 74.1196L56.8433 43.3959L56.8433 112L71.1567 112L71.1567 43.3959L101.88 74.1196L112 64L64 16L16 64Z" />
+);
diff --git a/src/assets/icons/YellowDot.jsx b/src/assets/icons/YellowDot.jsx
@@ -0,0 +1,33 @@
+export default (
+  <>
+    <g clipPath="url(#clip0_475_25152)">
+      <path
+        d="M109.243 109.245C134.231 84.2567 134.231 43.7433 109.243 18.7554C84.2552 -6.23254 43.7418 -6.23254 18.7539 18.7554C-6.23401 43.7433 -6.23401 84.2567 18.7539 109.245C43.7418 134.233 84.2552 134.233 109.243 109.245Z"
+        fill="url(#paint0_radial_475_25152)"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="paint0_radial_475_25152"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(34.8005 24.8644) scale(113.077)"
+      >
+        <stop stopColor="#F9FFB0" />
+        <stop offset="0.41" stopColor="#FFEA00" />
+        <stop offset="0.49" stopColor="#FFE500" />
+        <stop offset="0.58" stopColor="#FFD600" />
+        <stop offset="0.68" stopColor="#FFBE00" />
+        <stop offset="0.78" stopColor="#FF9D00" />
+        <stop offset="0.81" stopColor="#FF9500" />
+        <stop offset="0.89" stopColor="#FF9B00" />
+        <stop offset="1" stopColor="#FFAA00" />
+      </radialGradient>
+      <clipPath id="clip0_475_25152">
+        <rect width="128" height="128" fill="white" />
+      </clipPath>
+    </defs>
+  </>
+);
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
@@ -0,0 +1,39 @@
+import Close from "./Close";
+import DownArrow from "./DownArrow";
+import Flame from "./Flame";
+import GreenDot from "./GreenDot";
+import Hamburger from "./Hamburger";
+import LeftArrow from "./LeftArrow";
+import OrangeDot from "./OrangeDot";
+import Oven from "./Oven";
+import OvenMitt from "./OvenMitt";
+import RedDot from "./RedDot";
+import RightArrow from "./RightArrow";
+import Search from "./Search";
+import Smile from "./Smile";
+import Stars from "./Stars";
+import Stir from "./Stir";
+import Thermometer from "./Thermometer";
+import UpArrow from "./UpArrow";
+import YellowDot from "./YellowDot";
+
+export const icons = {
+  Close,
+  DownArrow,
+  Flame,
+  GreenDot,
+  Hamburger,
+  LeftArrow,
+  OrangeDot,
+  Oven,
+  OvenMitt,
+  RedDot,
+  RightArrow,
+  Search,
+  Smile,
+  Stars,
+  Stir,
+  Thermometer,
+  UpArrow,
+  YellowDot,
+};
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -18,3 +18,4 @@ export {
   search,
   downArrow,
 };
+export * from "./icons";
diff --git a/src/features/ui/Header/Header.jsx b/src/features/ui/Header/Header.jsx
@@ -1,12 +1,11 @@
-import { menuIcon, close } from "@/assets";
+import { colorLogo as Logo } from "@/assets";
+import { Icon } from "@/features/ui";
 import { navLinks, name } from "@/constants";
 
 import { Menu, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { Link } from "react-router-dom";
 
-import { colorLogo as Logo } from "@/assets";
-
 export const Header = () => {
   const [toggle, setToggle] = useState(false);
   return (
@@ -31,10 +30,9 @@ export const Header = () => {
         <div className="block lg:hidden">
           <Menu>
             <Menu.Button className="-m-1.5 flex items-center p-1.5">
-              <img
-                src={toggle ? close : menuIcon}
-                alt="menu"
-                className="h-9 w-9 cursor-pointer object-contain text-[#6DD1E3]"
+              <Icon
+                name={toggle ? "close" : "hamburger"}
+                className="w-9 text-[#6DD1E3]"
                 onClick={() => setToggle(!toggle)}
               />
             </Menu.Button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,3 +18,4 @@ export { @@
       search,
       downArrow,
     };
+    export * from "./icons";