Fix SVG icon issues (#154)

Signed-off-by: mohin7 <[email protected]>
appscode · Aug 1, 2024 · 7898354 · 7898354
1 parent 4a362ff
commit 7898354
Show file tree

Hide file tree

Showing 8 changed files with 23,377 additions and 4,566 deletions.
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -20,6 +20,7 @@
       "hr",
       "html",
       "i",
+      "iconify-icon",
       "iframe",
       "img",
       "input",
@@ -507,8 +508,7 @@
       "whats-new",
       "width-12",
       "width-16",
-      "width-20",
-      "width-24"
+      "width-20"
     ],
     "ids": [
       "1-1",

diff --git a/layouts/_default/contact_us.html b/layouts/_default/contact_us.html
@@ -26,10 +26,7 @@ <h6>Corporate HQ</h6>
             <!-- location  -->
             <a href="https://www.google.com/maps/place/3937+Spencer+St+%23118,+Las+Vegas,+NV+89119/@36.117353,-115.129931,17z/data=!4m5!3m4!1s0x80c8c52d14f91175:0x6a6f5ca64aac6b17!8m2!3d36.1173529!4d-115.1299314?hl=en&entry=ttu" target="_blank" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
-                </svg>
+                <iconify-icon icon="heroicons:map-pin" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>AppsCode Inc.<br/>3937 SPENCER ST APT 118<br/>Las Vegas<br/>NV 89119<br/>USA</span>
             </a>
@@ -38,20 +35,16 @@ <h6>Corporate HQ</h6>
             <!-- phone  -->
             <a href="callto:{{.Site.Params.contact_phone}}" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
-                </svg>
+                <iconify-icon icon="heroicons:phone" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>{{.Site.Params.contact_phone}}</span>
             </a>
             <!-- phone  -->
 
-            <!-- phone  -->
+            <!-- email  -->
             <a href="mailto:{{.Site.Params.contact_email}}" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
-                </svg>
+                <iconify-icon icon="heroicons:envelope" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>{{.Site.Params.contact_email}}</span>
             </a>
@@ -66,10 +59,7 @@ <h6>Dhaka Office</h6>
             <!-- location  -->
             <a href="https://www.google.com/maps/place/AppsCode+Ltd./@23.882877,90.389487,17z/data=!4m6!3m5!1s0x3755c46b5bbd22f9:0xd6602c2d16a5f203!8m2!3d23.8828769!4d90.3894866!16s%2Fg%2F11g00s2z77?hl=en&entry=ttu" target="_blank" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
-                </svg>
+                <iconify-icon icon="heroicons:map-pin" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>AppsCode Ltd.<br/>Flat A2, H 4, Rd 10, Sec 10<br/>Uttara<br/> Dhaka-1230<br/>Bangladesh</span>
             </a>
@@ -78,20 +68,16 @@ <h6>Dhaka Office</h6>
             <!-- phone  -->
             <a href="callto:+880 1720-171904" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
-                </svg>
+                <iconify-icon icon="heroicons:phone" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>+880 1720-171904</span>
             </a>
             <!-- phone  -->
 
-            <!-- phone  -->
+            <!-- email  -->
             <a href="mailto:{{.Site.Params.contact_email}}" class="single-contact-info">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
-                </svg>
+                <iconify-icon icon="heroicons:envelope" width="1.2rem" height="1.2rem"></iconify-icon>
               </span>
               <span>{{.Site.Params.contact_email}}</span>
             </a>

diff --git a/layouts/index.html b/layouts/index.html
@@ -60,9 +60,7 @@ <h1><span>Kubernetes Native</span><br><img src="data:image/svg+xml;base64,PHN2Zy
             <a href="{{ $p.homepage.hero_area.get_in_touch_url }}" class="button ac-button is-primary">
               <span>GET IN TOUCH</span>
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
-                </svg>
+                <iconify-icon icon="heroicons:arrow-small-right-solid" width="18" height="18"></iconify-icon>
               </span>
             </a>
 
@@ -158,9 +156,7 @@ <h2 class="mb-0">Explore AppsCode Products</h2>
             <button class="button ac-button is-transparent is-flex is-gap-4">
              <span>{{$product.name}}</span>
               <span class="width-16 is-flex">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                  <path fill-rule="evenodd" d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z" clip-rule="evenodd" />
-                </svg>
+                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
               </span>
             </button>
           </a>
@@ -186,9 +182,7 @@ <h2 class="mb-4">{{ $p.homepage.highlight_products.title }}</h2>
             </div>
             <a href="{{ $p.homepage.highlight_products.url }}" class="button ac-button is-primary ">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"></path>
-                </svg>
+                <iconify-icon icon="heroicons:chat-bubble-bottom-center" width="18" height="18"></iconify-icon>
               </span>
               <span>Let's Talk</span>  
             </a>
@@ -207,9 +201,7 @@ <h2 class="mb-4">{{ $p.homepage.highlight_products.title }}</h2>
                   <a class="inline-button is-flex is-gap-4" href="{{ $product.url }}">
                     <span>EXPLORE MORE</span>
                     <span class="width-16 is-flex">
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-                        <path fill-rule="evenodd" d="M8.25 3.75H19.5a.75.75 0 0 1 .75.75v11.25a.75.75 0 0 1-1.5 0V6.31L5.03 20.03a.75.75 0 0 1-1.06-1.06L17.69 5.25H8.25a.75.75 0 0 1 0-1.5Z" clip-rule="evenodd" />
-                      </svg>
+                      <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
                     </span>
                   </a>
                 </div>
@@ -272,9 +264,7 @@ <h2 class="mb-4">{{ $p.homepage.highlight_products.title }}</h2>
                   <a class="button ac-button is-primary is-uppercase" href="{{ $products.url }}">
                     <span>TRY {{$products.product}}</span>
                     <span class="icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"></path>
-                      </svg>
+                      <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
                     </span>
                   </a>
                 </div>
@@ -441,9 +431,7 @@ <h3>We are always there for you</h3>
       <a href="https://console.appscode.com" class="button ac-button is-primary">
         <span>TRY UI</span>
         <span class="icon">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
-          </svg>
+          <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
         </span>
       </a>
 
@@ -742,16 +730,12 @@ <h2 class="is-gradient">What They Are <span
           <div class="arrows" >
             <button class="button arrow is-rounded customPrevBtn" title="Previous">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
-                </svg>                
+                <iconify-icon icon="heroicons:arrow-small-left" width="24" height="24"></iconify-icon>           
               </span>
             </button>
             <button class="button arrow is-rounded customNextBtn" title="Next">
               <span class="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
-                </svg>
+                <iconify-icon icon="heroicons:arrow-small-right" width="24" height="24"></iconify-icon>
               </span>
             </button>
           </div>
@@ -805,9 +789,7 @@ <h2>Manage your Kubernetes Native Applications across <br/>any Cloud or On-premi
 
                 <a href="{{ $.Site.Params.domain_appscode }}/contact/" class="button ac-button is-primary ">
                     <span class="icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
-                      </svg>
+                      <iconify-icon icon="heroicons:chat-bubble-bottom-center" width="18" height="18"></iconify-icon>
                     </span>
                     <span>CONTACT US</span>
                 </a>