From 91df6994333a74e21d84da0dfb3ba817b4ce4a68 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Wed, 11 Mar 2026 15:21:58 +0700
Subject: [PATCH] fix: use official social media icon SVGs from Simple Icons

- Download official SVG icons from Simple Icons CDN
- Replace inline SVG code with <img> tags referencing icon files
- Icons sourced from simpleicons.org (Simple Icons project)
- Add Facebook, X (Twitter), LinkedIn, and LINE icons
- Files: /icons/social/{facebook,x,linkedin,line}.svg

Source: https://simpleicons.org/
---
 public/icons/social/facebook.svg |  1 +
 public/icons/social/line.svg     |  1 +
 public/icons/social/linkedin.svg |  1 +
 public/icons/social/x.svg        |  1 +
 src/layouts/Layout.astro         | 32 ++++++++------------------------
 src/pages/contact-us.astro       | 16 ++++------------
 6 files changed, 16 insertions(+), 36 deletions(-)
 create mode 100644 public/icons/social/facebook.svg
 create mode 100644 public/icons/social/line.svg
 create mode 100644 public/icons/social/linkedin.svg
 create mode 100644 public/icons/social/x.svg

diff --git a/public/icons/social/facebook.svg b/public/icons/social/facebook.svg
new file mode 100644
index 0000000..dab4587
--- /dev/null
+++ b/public/icons/social/facebook.svg
@@ -0,0 +1 @@
+<svg fill="#0866FF" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>
diff --git a/public/icons/social/line.svg b/public/icons/social/line.svg
new file mode 100644
index 0000000..b6eb4e8
--- /dev/null
+++ b/public/icons/social/line.svg
@@ -0,0 +1 @@
+<svg fill="#00C300" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LINE</title><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
diff --git a/public/icons/social/linkedin.svg b/public/icons/social/linkedin.svg
new file mode 100644
index 0000000..e72d827
--- /dev/null
+++ b/public/icons/social/linkedin.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#0A66C2"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
diff --git a/public/icons/social/x.svg b/public/icons/social/x.svg
new file mode 100644
index 0000000..0257376
--- /dev/null
+++ b/public/icons/social/x.svg
@@ -0,0 +1 @@
+<svg fill="#000000" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/></svg>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b017aa9..e5b38d7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -68,27 +68,19 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
             <div class="flex gap-3">
               <!-- Facebook -->
               <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" aria-label="Facebook">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                </svg>
+                <img src="/icons/social/facebook.svg" alt="Facebook" class="w-6 h-6" />
               </a>
               <!-- Twitter / X -->
               <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" aria-label="Twitter">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-                </svg>
+                <img src="/icons/social/x.svg" alt="X (Twitter)" class="w-6 h-6" />
               </a>
               <!-- LinkedIn -->
               <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" aria-label="LinkedIn">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                </svg>
+                <img src="/icons/social/linkedin.svg" alt="LinkedIn" class="w-6 h-6" />
               </a>
               <!-- LINE -->
               <a href="#" target="_blank" rel="noopener noreferrer" class="hover:text-primary transition" aria-label="LINE">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 12.073c0-4.555-4.388-8.252-9.803-8.252-5.417 0-9.805 3.697-9.805 8.252 0 4.088 3.728 7.494 8.724 8.154.344.073.812.228.93.518.107.263.07.671.033.94l-.152.893c-.045.263-.221 1.034.958.564 1.183-.468 6.388-3.748 8.746-6.406 1.656-1.823 2.375-3.223 2.375-4.663h-.006zm-6.323 2.748c-.492.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.184-.896.476-1.21a1.665 1.665 0 011.213-.512c.487 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.186.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.261 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.238 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518z"/>
-                </svg>
+                <img src="/icons/social/line.svg" alt="LINE" class="w-6 h-6" />
               </a>
             </div>
         </div>
@@ -163,27 +155,19 @@ const { title = 'MoreminiMore - ที่ปรึกษาองค์กร AI
             <div class="mt-4 flex gap-3">
               <!-- Facebook -->
               <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition" aria-label="Facebook">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                </svg>
+                <img src="/icons/social/facebook.svg" alt="Facebook" class="w-6 h-6" />
               </a>
               <!-- Twitter / X -->
               <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition" aria-label="Twitter">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-                </svg>
+                <img src="/icons/social/x.svg" alt="X (Twitter)" class="w-6 h-6" />
               </a>
               <!-- LinkedIn -->
               <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition" aria-label="LinkedIn">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                </svg>
+                <img src="/icons/social/linkedin.svg" alt="LinkedIn" class="w-6 h-6" />
               </a>
               <!-- LINE -->
               <a href="#" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-accent-blue transition" aria-label="LINE">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M20.447 12.073c0-4.555-4.388-8.252-9.803-8.252-5.417 0-9.805 3.697-9.805 8.252 0 4.088 3.728 7.494 8.724 8.154.344.073.812.228.93.518.107.263.07.671.033.94l-.152.893c-.045.263-.221 1.034.958.564 1.183-.468 6.388-3.748 8.746-6.406 1.656-1.823 2.375-3.223 2.375-4.663h-.006zm-6.323 2.748c-.492.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.184-.896.476-1.21a1.665 1.665 0 011.213-.512c.487 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.186.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.261 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.238 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518z"/>
-                </svg>
+                <img src="/icons/social/line.svg" alt="LINE" class="w-6 h-6" />
               </a>
             </div>
           </div>
diff --git a/src/pages/contact-us.astro b/src/pages/contact-us.astro
index 4cd61e7..4f0a0f2 100644
--- a/src/pages/contact-us.astro
+++ b/src/pages/contact-us.astro
@@ -34,9 +34,7 @@ import Layout from '../layouts/Layout.astro'
               </div>
               <div class="flex items-start gap-4">
                 <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center">
-                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M20.447 12.073c0-4.555-4.388-8.252-9.803-8.252-5.417 0-9.805 3.697-9.805 8.252 0 4.088 3.728 7.494 8.724 8.154.344.073.812.228.93.518.107.263.07.671.033.94l-.152.893c-.045.263-.221 1.034.958.564 1.183-.468 6.388-3.748 8.746-6.406 1.656-1.823 2.375-3.223 2.375-4.663h-.006zm-6.323 2.748c-.492.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.184-.896.476-1.21a1.665 1.665 0 011.213-.512c.487 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.186.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.261 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518zm-3.238 0c-.493.003-.912-.24-1.213-.558a1.66 1.66 0 01-.476-1.17c0-.458.183-.896.476-1.21a1.665 1.665 0 011.213-.512c.486 0 .912.238 1.21.558a1.683 1.683 0 01.478 1.164c0 .463-.187.898-.478 1.21a1.666 1.666 0 01-1.21.518z"/>
-                  </svg>
+                  <img src="/icons/social/line.svg" alt="LINE" class="w-6 h-6" />
                 </div>
                 <div>
                   <h3 class="font-bold mb-1">Line</h3>
@@ -54,21 +52,15 @@ import Layout from '../layouts/Layout.astro'
                   <div class="flex gap-3 mt-2">
                     <!-- Facebook -->
                     <a href="https://www.facebook.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="Facebook">
-                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-                      </svg>
+                      <img src="/icons/social/facebook.svg" alt="Facebook" class="w-6 h-6" />
                     </a>
                     <!-- Twitter / X -->
                     <a href="https://twitter.com/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="Twitter">
-                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-                      </svg>
+                      <img src="/icons/social/x.svg" alt="X (Twitter)" class="w-6 h-6" />
                     </a>
                     <!-- LinkedIn -->
                     <a href="https://www.linkedin.com/company/moreminimore" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-primary transition" aria-label="LinkedIn">
-                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
-                      </svg>
+                      <img src="/icons/social/linkedin.svg" alt="LinkedIn" class="w-6 h-6" />
                     </a>
                   </div>
                 </div>