finish

luzhnyak · Feb 18, 2024 · 81ddd55 · 81ddd55
1 parent a770aad
commit 81ddd55
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 45 deletions.
diff --git a/public/icons.svg b/public/icons.svg
diff --git a/src/assets/icons.svg b/src/assets/icons.svg
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -7,6 +7,7 @@ import { selectAllFavoritesCars } from "../../redux/favorites/selectors";
 import css from "./Card.module.css";
 
 import Modal from "../Modal/Modal";
+import Icon from "../Icon/Icon";
 
 const Card = ({ data }) => {
   const {
@@ -88,9 +89,7 @@ const Card = ({ data }) => {
         className={isFavorite ? css.btnFavActive : css.btnFav}
         onClick={(id) => handleFavClick(id)}
       >
-        <svg width="18" height="18">
-          <use href={"./icons.svg#icon-fav"} />
-        </svg>
+        <Icon id="icon-fav" width="18" height="18" />
       </button>
       {isShowModal && <Modal onClose={setIsShowModal} data={data} />}
     </div>

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import css from "./Dropdown.module.css";
+import Icon from "../Icon/Icon";
 
 const ListDropdown = ({ items, onSelect, onClose }) => {
   const listRef = useRef(null);
@@ -55,9 +56,7 @@ const Dropdown = ({ items = [], defaultSelect, onSelect }) => {
     <div className={css.wrapper}>
       <button className={css.btn} onClick={() => setIsOpenList(!isOpenList)}>
         {selectText}
-        <svg width="20" height="20" alt="dropdown">
-          <use href={"./icons.svg#icon-dropdown"} />
-        </svg>
+        <Icon id="icon-dropdown" width="20" height="20" />
       </button>
       {isOpenList && (
         <ListDropdown

diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
@@ -1,11 +1,71 @@
-import icons from "../../assets/icons.svg";
-
-const Icon = ({ className, id, width, height }) => {
-  return (
-    <svg className={className} width={width} height={height}>
-      <use href={`${icons}#${id}`}></use>
-    </svg>
-  );
+const Icon = ({ id, width, height }) => {
+  switch (id) {
+    case "icon-close":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18 6L6 18"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6 6L18 18"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+
+    case "icon-fav":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.6301 3.45753C15.247 3.07428 14.7922 2.77026 14.2916 2.56284C13.791 2.35542 13.2545 2.24866 12.7126 2.24866C12.1707 2.24866 11.6342 2.35542 11.1336 2.56284C10.633 2.77026 10.1782 3.07428 9.79509 3.45753L9.00009 4.25253L8.20509 3.45753C7.43132 2.68376 6.38186 2.24906 5.28759 2.24906C4.19331 2.24906 3.14386 2.68376 2.37009 3.45753C1.59632 4.2313 1.16162 5.28075 1.16162 6.37503C1.16162 7.4693 1.59632 8.51876 2.37009 9.29253L3.16509 10.0875L9.00009 15.9225L14.8351 10.0875L15.6301 9.29253C16.0133 8.90946 16.3174 8.45464 16.5248 7.95404C16.7322 7.45345 16.839 6.91689 16.839 6.37503C16.839 5.83316 16.7322 5.2966 16.5248 4.79601C16.3174 4.29542 16.0133 3.84059 15.6301 3.45753Z"
+            strokeOpacity="0.8"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+
+    case "icon-dropdown":
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 12.5L10 7.5L15 12.5"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+
+    default:
+      return <svg></svg>;
+  }
 };
 
 export default Icon;
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -68,9 +68,6 @@ const Modal = ({ onClose, data }) => {
           title="Close"
         >
           <Icon id="icon-close" width="24" height="24" />
-          {/* <svg width="24" height="24" alt="Close">
-            <use href={`${Icons}#icon-close`} />
-          </svg> */}
         </button>
         <div className={css.content}>
           <img className={css.image} src={img} alt={model} />