💄 Add new icons for eCommerce, social apps, and field services; update existing icons to use currentColor for better theming support

Author: HassanZahirnia

resources/views/components/home/explainer.blade.php

@@ -423,12 +423,15 @@ class="text-xl font-bold text-gray-800 lg:text-2xl dark:text-white"
             </p>
 
             <div
-                class="flex flex-wrap items-start gap-x-2.5 gap-y-3 2xl:gap-x-3"
+                class="flex flex-wrap items-start gap-x-2.5 gap-y-3 [--icon-bg:#F9FBF0] [--icon-stroke:#717838] 2xl:gap-x-3 dark:[--icon-bg:--alpha(var(--color-slate-400)/30%)] dark:[--icon-stroke:--alpha(var(--color-white)/60%)]"
             >
                 @php
                     $categories = [
                         ['name' => 'SaaS clients', 'icon' => 'icons.home.web'],
                         ['name' => 'Games', 'icon' => 'icons.home.game'],
+                        ['name' => 'eCommerce', 'icon' => 'icons.home.shop'],
+                        ['name' => 'Social apps', 'icon' => 'icons.home.social'],
+                        ['name' => 'Field services', 'icon' => 'icons.home.wrench'],
                     ];
                 @endphp
 

resources/views/components/icons/home/game.blade.php

@@ -8,25 +8,29 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M8.20998 6.50671C6.39922 6.59141 4.75729 6.87931 4.09433 7.37039C3.41774 7.87158 1.89725 11.3878 1.56339 13.3845C1.08522 16.2442 1.39089 18.6218 4.24169 18.6218C5.50465 17.5994 6.10982 16.5786 6.42478 15.7901H12.2886C12.6036 16.5786 13.2087 17.5994 14.4717 18.6218C17.3225 18.6218 17.5336 16.2584 17.15 13.3845C17.0497 12.6338 16.8086 11.7674 16.5068 10.9283C16.1265 11.4384 15.4799 11.9897 14.4773 11.9897C13.0823 11.9897 12.3763 10.9224 12.1185 10.3837C11.9995 10.1351 11.8805 9.81347 11.8037 9.60591C11.7763 9.53166 11.7514 9.45039 11.7257 9.36669C11.6382 9.08097 11.5421 8.76696 11.3049 8.60715C11.2705 8.58401 11.2198 8.55392 11.147 8.51761C10.9945 8.44152 10.7995 8.36434 10.532 8.2684C10.5042 8.25851 10.4726 8.24748 10.4377 8.2353C10.2266 8.16162 9.89682 8.04651 9.59155 7.89615C9.16324 7.68515 8.52918 7.24292 8.20998 6.50671Z"
-        fill="#F9FBF0"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M16.7199 11.5581C16.92 12.1918 17.0747 12.8207 17.15 13.3844C17.5336 16.2584 17.3225 18.6217 14.4717 18.6217C13.2087 17.5993 12.6036 16.5786 12.2886 15.79H6.42478C6.10982 16.5786 5.50465 17.5993 4.24169 18.6217C1.39089 18.6217 1.08522 16.2441 1.56339 13.3844C1.89725 11.3878 3.41774 7.87152 4.09433 7.37033C4.66964 6.94416 5.98218 6.67102 7.50252 6.5509"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M6.9668 12.9844V9.66833"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M5.30853 11.3264H8.6246"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -37,7 +41,8 @@
     />
     <path
         d="M12.99 4.04765C13.9165 3.12113 14.0907 1.37817 14.477 1.37817C14.8634 1.37817 15.0377 3.12113 15.9642 4.04765C16.8907 4.97417 18.6221 5.0723 18.6221 5.52326C18.6221 5.97422 16.8907 6.07235 15.9642 6.99888C15.0377 7.9254 14.8634 9.66835 14.477 9.66835C14.0907 9.66835 13.9165 7.9254 12.99 6.99888C12.0635 6.07235 10.332 5.97422 10.332 5.52326C10.332 5.0723 12.0635 4.97417 12.99 4.04765Z"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"

resources/views/components/icons/home/shop.blade.php

@@ -6,18 +6,21 @@
 >
     <path
         d="M1.37891 1.37817H2.47277C3.70372 1.37817 4.77298 2.22494 5.05505 3.42314L5.87632 6.91187"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M18.6168 6.01896C18.4274 8.11747 17.8375 11.4146 17.353 12.5512C17.1313 13.0713 16.7115 13.467 16.1622 13.6091C15.4758 13.7867 14.2855 13.9792 12.3502 13.9792C10.415 13.9792 9.2246 13.7867 8.53818 13.6091C7.98892 13.467 7.57162 13.0694 7.36175 12.5444C6.80262 11.1458 5.76017 7.16698 5.35742 4.69421H17.3461C18.0819 4.69421 18.6826 5.28933 18.6168 6.01896Z"
-        fill="#F9FBF0"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
     />
     <path
         d="M18.6168 6.01896C18.4274 8.11747 17.8375 11.4146 17.353 12.5512C17.1313 13.0713 16.7115 13.467 16.1622 13.6091C15.4758 13.7867 14.2855 13.9792 12.3502 13.9792C10.415 13.9792 9.2246 13.7867 8.53818 13.6091C7.98892 13.467 7.57162 13.0694 7.36175 12.5444C6.80262 11.1458 5.76017 7.16698 5.35742 4.69421H17.3461C18.0819 4.69421 18.6826 5.28933 18.6168 6.01896Z"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -28,7 +31,8 @@
     />
     <path
         d="M8.17782 18.6218C8.99767 18.6218 9.66229 17.9571 9.66229 17.1374C9.66229 16.3175 8.99767 15.6528 8.17782 15.6528C7.35798 15.6528 6.69336 16.3175 6.69336 17.1374C6.69336 17.9571 7.35798 18.6218 8.17782 18.6218Z"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -39,14 +43,16 @@
     />
     <path
         d="M16.467 18.6218C17.2869 18.6218 17.9514 17.9571 17.9514 17.1374C17.9514 16.3175 17.2869 15.6528 16.467 15.6528C15.6471 15.6528 14.9826 16.3175 14.9826 17.1374C14.9826 17.9571 15.6471 18.6218 16.467 18.6218Z"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"
     />
     <path
         d="M10.3401 9.86006L12.0283 11.43C12.8227 9.37218 13.4843 8.4692 14.9826 7.24353"
-        stroke="#717838"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
         stroke-width="1.43"
         stroke-linecap="round"
         stroke-linejoin="round"

resources/views/components/icons/home/social.blade.php

@@ -0,0 +1,48 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="none"
+>
+    <path
+        d="M1.8422 3.4243C1.88746 2.8709 2.2717 2.40772 2.80581 2.27947C7.81045 1.07774 12.1914 1.07774 17.196 2.27947C17.7301 2.40772 18.1144 2.8709 18.1596 3.4243C18.368 5.9732 18.4668 7.81775 18.4561 10.4579C18.4371 15.0823 14.5726 18.6212 10.0009 18.6212C5.42918 18.6212 1.56463 15.0823 1.54572 10.4579C1.53492 7.81775 1.63375 5.9732 1.8422 3.4243Z"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
+    />
+    <path
+        d="M10.0017 14.7848C13.5297 14.7848 14.9409 11.9624 14.9409 10.5512C11.622 10.1616 8.38141 10.1616 5.0625 10.5512C5.0625 11.9624 6.47369 14.7848 10.0017 14.7848Z"
+        fill="white"
+    />
+    <path
+        d="M1.8422 3.4243C1.88746 2.8709 2.2717 2.40772 2.80581 2.27947C7.81045 1.07774 12.1914 1.07774 17.196 2.27947C17.7301 2.40772 18.1144 2.8709 18.1596 3.4243C18.368 5.9732 18.4668 7.81775 18.4561 10.4579C18.4371 15.0823 14.5726 18.6212 10.0009 18.6212C5.42918 18.6212 1.56463 15.0823 1.54572 10.4579C1.53492 7.81775 1.63375 5.9732 1.8422 3.4243Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M10.0017 14.7848C13.5297 14.7848 14.9409 11.9624 14.9409 10.5512C11.622 10.1616 8.38141 10.1616 5.0625 10.5512C5.0625 11.9624 6.47369 14.7848 10.0017 14.7848Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M12.1855 7.0242C12.4501 6.59422 13.0323 6.3186 13.5967 6.3186C14.1612 6.3186 14.7434 6.59422 15.0079 7.0242"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M5.0625 7.0242C5.3271 6.59422 5.90921 6.3186 6.4737 6.3186C7.03818 6.3186 7.62029 6.59422 7.8849 7.0242"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+</svg>

resources/views/components/icons/home/web.blade.php

@@ -4,51 +4,46 @@
     viewBox="0 0 20 20"
     fill="none"
 >
-    <g clip-path="url(#clip0_1_773)">
-        <path
-            d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
-            fill="white"
-        />
-        <path
-            d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
-            fill="#F9FBF0"
-        />
-        <path
-            d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
-            stroke="#717838"
-            stroke-width="1.43"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            d="M11.0818 13.4819H5.97852"
-            stroke="#717838"
-            stroke-width="1.43"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            d="M5.97845 10H14.0199"
-            stroke="#717838"
-            stroke-width="1.43"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-        <path
-            d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
-            stroke="#717838"
-            stroke-width="1.43"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        />
-    </g>
-    <defs>
-        <clipPath id="clip0_1_773">
-            <rect
-                width="20"
-                height="20"
-                fill="white"
-            />
-        </clipPath>
-    </defs>
+    <path
+        d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
+    />
+    <path
+        d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
+    />
+    <path
+        d="M1.94403 14.361C2.14958 16.2833 3.69483 17.8294 5.61516 18.0435C8.56482 18.3724 11.4335 18.3724 14.3831 18.0435C16.3035 17.8294 17.8487 16.2833 18.0543 14.361C18.3677 11.4304 18.3677 8.56965 18.0543 5.63893C17.8487 3.71672 16.3035 2.17071 14.3831 1.95655C11.4335 1.6276 8.56482 1.6276 5.61516 1.95655C3.69483 2.17071 2.14958 3.71672 1.94403 5.63893C1.63064 8.56965 1.63064 11.4304 1.94403 14.361Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M11.0818 13.4819H5.97852"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M5.97845 10H14.0199"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        d="M18.0918 5.99723H1.90625C1.9186 5.87753 1.93117 5.7581 1.94392 5.63893C2.14947 3.71672 3.69472 2.17071 5.61504 1.95655C8.5647 1.6276 11.4334 1.6276 14.383 1.95655C16.3034 2.17071 17.8487 3.71672 18.0542 5.63893C18.0669 5.7581 18.0795 5.87753 18.0918 5.99723Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
 </svg>

resources/views/components/icons/home/wrench.blade.php

@@ -0,0 +1,35 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+>
+    <path
+        d="M1.98736 14.3354C2.1918 16.2464 3.72874 17.7834 5.63874 17.9963C7.05742 18.1544 8.51405 18.2902 9.99916 18.2902C11.4843 18.2902 12.9409 18.1544 14.3595 17.9963C16.2696 17.7834 17.8065 16.2464 18.0109 14.3354C18.1619 12.9248 18.2893 11.4765 18.2893 10C18.2893 8.52349 18.1619 7.07522 18.0109 5.66455C17.8065 3.75363 16.2696 2.21668 14.3595 2.00379C12.9409 1.84565 11.4843 1.70984 9.99916 1.70984C8.51405 1.70984 7.05742 1.84565 5.63874 2.00379C3.72874 2.21668 2.1918 3.75363 1.98736 5.66455C1.83643 7.07522 1.70898 8.52349 1.70898 10C1.70898 11.4765 1.83643 12.9248 1.98736 14.3354Z"
+        fill="currentColor"
+        class="text-[var(--icon-bg)]"
+    />
+    <path
+        d="M1.98736 14.3354C2.1918 16.2464 3.72874 17.7834 5.63874 17.9963C7.05742 18.1544 8.51405 18.2902 9.99916 18.2902C11.4843 18.2902 12.9409 18.1544 14.3595 17.9963C16.2696 17.7834 17.8065 16.2464 18.0109 14.3354C18.1619 12.9248 18.2893 11.4765 18.2893 10C18.2893 8.52349 18.1619 7.07522 18.0109 5.66455C17.8065 3.75363 16.2696 2.21668 14.3595 2.00379C12.9409 1.84565 11.4843 1.70984 9.99916 1.70984C8.51405 1.70984 7.05742 1.84565 5.63874 2.00379C3.72874 2.21668 2.1918 3.75363 1.98736 5.66455C1.83643 7.07522 1.70898 8.52349 1.70898 10C1.70898 11.4765 1.83643 12.9248 1.98736 14.3354Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.7168 18.1615C12.7521 17.4818 12.7794 16.7817 12.7794 16.0683C12.7794 15.2656 12.7448 14.4797 12.7032 13.7207C13.4604 13.3991 14.0757 12.9209 14.5119 12.2868C15.0003 11.5769 15.2387 10.7091 15.2387 9.72677C15.2387 8.71369 14.9851 7.82268 14.466 7.1015C13.9466 6.37983 13.1904 5.8686 12.2553 5.56611C11.8288 5.42818 11.4168 5.7547 11.4168 6.17773C11.4168 6.5713 11.4289 6.97346 11.4402 7.34829C11.4474 7.58382 11.4542 7.80876 11.4574 8.01377C11.4663 8.5747 11.4508 9.03509 11.3734 9.40348C11.2973 9.76528 11.1727 9.98423 11.0036 10.1218C10.8334 10.2603 10.5406 10.3793 9.99923 10.3793C9.45788 10.3793 9.16509 10.2603 8.99488 10.1218C8.82584 9.98422 8.70121 9.76528 8.62515 9.40348C8.54773 9.03508 8.53221 8.5747 8.5411 8.01377C8.54433 7.80876 8.55114 7.58385 8.55826 7.34833C8.56959 6.97352 8.58175 6.57129 8.58175 6.17773C8.58175 5.7547 8.16967 5.42816 7.74324 5.56611C6.80812 5.8686 6.05195 6.37983 5.53252 7.1015C5.01346 7.82267 4.75977 8.71369 4.75977 9.72677C4.75977 10.7091 4.99822 11.5769 5.48661 12.2868C5.9229 12.9209 6.53813 13.3991 7.29527 13.7207C7.25373 14.4797 7.21908 15.2656 7.21908 16.0683C7.21908 16.7817 7.24645 17.4818 7.28169 18.1615C8.17521 18.2384 9.08183 18.2902 9.99932 18.2902C10.9168 18.2902 11.8233 18.2384 12.7168 18.1615Z"
+        fill="white"
+    />
+    <path
+        d="M12.7168 18.1615C12.7521 17.4818 12.7794 16.7817 12.7794 16.0683C12.7794 15.2656 12.7448 14.4797 12.7032 13.7207C13.4604 13.3991 14.0757 12.9209 14.5119 12.2868C15.0003 11.5769 15.2387 10.7091 15.2387 9.72677C15.2387 8.71369 14.9851 7.82268 14.466 7.1015C13.9466 6.37983 13.1904 5.8686 12.2553 5.56611C11.8288 5.42818 11.4168 5.7547 11.4168 6.17773C11.4168 6.5713 11.4289 6.97346 11.4402 7.34829C11.4474 7.58381 11.4542 7.80876 11.4574 8.01377C11.4663 8.5747 11.4508 9.03509 11.3734 9.40348C11.2973 9.76528 11.1727 9.98423 11.0036 10.1218C10.8334 10.2603 10.5406 10.3793 9.99923 10.3793C9.45788 10.3793 9.16509 10.2603 8.99488 10.1218C8.82584 9.98422 8.70121 9.76528 8.62515 9.40348C8.54773 9.03508 8.53221 8.5747 8.5411 8.01377C8.54433 7.80876 8.55114 7.58385 8.55826 7.34833C8.56959 6.9735 8.58175 6.57129 8.58175 6.17773C8.58175 5.7547 8.16967 5.42816 7.74324 5.56611C6.80812 5.8686 6.05195 6.37983 5.53252 7.1015C5.01346 7.82267 4.75977 8.71369 4.75977 9.72677C4.75977 10.7091 4.99822 11.5769 5.48661 12.2868C5.9229 12.9209 6.53813 13.3991 7.29527 13.7207C7.25373 14.4797 7.21908 15.2656 7.21908 16.0683C7.21908 16.7817 7.24645 17.4818 7.28169 18.1615C8.17521 18.2384 9.08183 18.2902 9.99932 18.2902C10.9168 18.2902 11.8233 18.2384 12.7168 18.1615Z"
+        stroke="currentColor"
+        class="text-[var(--icon-stroke)]"
+        stroke-width="1.43"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    />
+</svg>