Added x icon in modal

js-tasks-ru · Dec 18, 2024 · 241bdf6 · 241bdf6
1 parent a68d409
commit 241bdf6
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/05-lection3/02-modal/index.html b/05-lection3/02-modal/index.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="./modal.css">
     <link rel="stylesheet" href="../../components/01-button/button.css">
     <title>Modal</title>
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body>
@@ -15,15 +17,8 @@
 
         <div id="modal" class="modal">
             <div class="modal__content">
-                <svg id="modal-close" class="modal__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
-                    viewBox="0 0 16 16" fill="none">
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M12.4714 3.52861C12.7318 3.78896 12.7318 4.21107 12.4714 4.47141L4.47141 12.4714C4.21107 12.7318 3.78896 12.7318 3.52861 12.4714C3.26826 12.2111 3.26826 11.789 3.52861 11.5286L11.5286 3.52861C11.789 3.26826 12.2111 3.26826 12.4714 3.52861Z"
-                        fill="#495057" />
-                    <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M3.52861 3.52861C3.78896 3.26826 4.21107 3.26826 4.47141 3.52861L12.4714 11.5286C12.7318 11.789 12.7318 12.2111 12.4714 12.4714C12.2111 12.7318 11.789 12.7318 11.5286 12.4714L3.52861 4.47141C3.26826 4.21107 3.26826 3.78896 3.52861 3.52861Z"
-                        fill="#495057" />
-                </svg>
+                <i data-feather="x" id="modal-close" class="modal__icon"></i>
+
                 <h2 class="modal__title">Modal title</h2>
                 <p class="modal__text">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
                     Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
@@ -34,6 +29,9 @@ <h2 class="modal__title">Modal title</h2>
         </div>
     </div>
 
+    <script>
+        feather.replace();
+      </script>
 </body>
 <script src="./index.js"></script>