move footer icons to svg files (#380)

martgnz · web-flow · commit a52bcd6ed205 · 2025-01-07T16:30:34.000+02:00
diff --git a/public/img/icon/bsky.svg b/public/img/icon/bsky.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="14"
+  fill="none"
+  viewBox="0 0 16 14"
+>
+  <path
+    fill="#fff"
+    d="M3.62 1.163C5.391 2.482 7.3 5.155 8 6.59c.7-1.434 2.607-4.108 4.38-5.427 1.28-.951 3.353-1.688 3.353.655 0 .468-.27 3.93-.43 4.492-.551 1.955-2.563 2.453-4.353 2.151 3.128.528 3.924 2.275 2.206 4.021-3.264 3.318-4.691-.832-5.057-1.895C8.032 10.392 8 10.3 8 10.378c0-.077-.032.014-.099.209-.366 1.063-1.793 5.213-5.057 1.895-1.718-1.746-.922-3.493 2.206-4.02-1.79.301-3.802-.197-4.354-2.152-.159-.562-.43-4.024-.43-4.492C.267-.525 2.34.212 3.62 1.163Z"
+  ></path>
+</svg>
diff --git a/public/img/icon/gh.svg b/public/img/icon/gh.svg
@@ -0,0 +1,5 @@
+<svg id="github" width="18" height="18" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14.9981 0.312256C6.71625 0.312256 0 7.05476 0 15.3723C0 22.0248 4.2975 27.6685 10.26 29.6616C11.01 29.8004 11.2838 29.3354 11.2838 28.936C11.2838 28.5779 11.2706 27.631 11.2631 26.3748C7.09125 27.2841 6.21 24.3554 6.21 24.3554C5.52938 22.6154 4.545 22.1523 4.545 22.1523C3.18187 21.2185 4.64625 21.2373 4.64625 21.2373C6.15188 21.3441 6.94313 22.7898 6.94313 22.7898C8.28187 25.0904 10.455 24.4266 11.31 24.0404C11.445 23.0673 11.8331 22.4035 12.2625 22.0266C8.9325 21.646 5.43 20.3541 5.43 14.5848C5.43 12.9404 6.015 11.596 6.975 10.5423C6.81938 10.1616 6.30562 8.62976 7.12125 6.55788C7.12125 6.55788 8.38125 6.15288 11.2463 8.10101C12.4425 7.76726 13.725 7.60038 15.0019 7.59476C16.275 7.60226 17.5594 7.76726 18.7575 8.10288C21.6206 6.15476 22.8787 6.55976 22.8787 6.55976C23.6962 8.63351 23.1825 10.1635 23.0287 10.5441C23.9906 11.5979 24.57 12.9423 24.57 14.5866C24.57 20.371 21.0637 21.6441 17.7225 22.0173C18.2606 22.4823 18.7406 23.401 18.7406 24.8054C18.7406 26.8191 18.7219 28.4429 18.7219 28.936C18.7219 29.3391 18.9919 29.8079 19.7531 29.6598C25.7062 27.6648 30 22.0229 30 15.3723C30 7.05476 23.2838 0.312256 14.9981 0.312256Z"
+    fill="#fff" />
+</svg>
diff --git a/public/img/icon/linkedin.svg b/public/img/icon/linkedin.svg
@@ -1,3 +1,6 @@
-<svg id="linkedin" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 1.75C3.5 2.7165 2.7165 3.5 1.75 3.5C0.783502 3.5 0 2.7165 0 1.75C0 0.783502 0.783502 0 1.75 0C2.7165 0 3.5 0.783502 3.5 1.75ZM0 5H3.578V16H0V5ZM13.2998 5.12119C13.2954 5.11973 13.2909 5.11825 13.2864 5.11678C13.2616 5.10856 13.2367 5.10033 13.21 5.093C13.162 5.082 13.114 5.073 13.065 5.065C12.875 5.027 12.667 5 12.423 5C10.337 5 9.014 6.517 8.578 7.103V5H5V16H8.578V10C8.578 10 11.282 6.234 12.423 9V16H16V8.577C16 6.915 14.861 5.53 13.324 5.129C13.3159 5.12643 13.3078 5.12382 13.2998 5.12119Z" fill="#979DA6"/>
+<svg id="linkedin" width="16" height="16" viewBox="0 0 16 16" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M3.5 1.75C3.5 2.7165 2.7165 3.5 1.75 3.5C0.783502 3.5 0 2.7165 0 1.75C0 0.783502 0.783502 0 1.75 0C2.7165 0 3.5 0.783502 3.5 1.75ZM0 5H3.578V16H0V5ZM13.2998 5.12119C13.2954 5.11973 13.2909 5.11825 13.2864 5.11678C13.2616 5.10856 13.2367 5.10033 13.21 5.093C13.162 5.082 13.114 5.073 13.065 5.065C12.875 5.027 12.667 5 12.423 5C10.337 5 9.014 6.517 8.578 7.103V5H5V16H8.578V10C8.578 10 11.282 6.234 12.423 9V16H16V8.577C16 6.915 14.861 5.53 13.324 5.129C13.3159 5.12643 13.3078 5.12382 13.2998 5.12119Z"
+    fill="#fff" />
 </svg>
diff --git a/public/img/icon/mstdn.svg b/public/img/icon/mstdn.svg
@@ -0,0 +1,13 @@
+<svg
+  id="mas"
+  viewBox="0 0 16 16"
+  width="16"
+  height="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill="white"
+    d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z"
+    style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"
+  ></path>
+</svg>
diff --git a/public/img/icon/x.svg b/public/img/icon/x.svg
@@ -0,0 +1,11 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 1200 1227"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+    fill="white"></path>
+</svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,6 +1,11 @@
 ---
 import { Image } from "astro:assets";
 import maplibreLogo from "../../public/img/maplibre-logo.svg";
+import bskyIcon from "../../public/img/icon/bsky.svg";
+import mstdnIcon from "../../public/img/icon/mstdn.svg";
+import xIcon from "../../public/img/icon/x.svg";
+import linkedin from "../../public/img/icon/linkedin.svg";
+import ghIcon from "../../public/img/icon/gh.svg";
 ---
 
 <footer class="mt-auto">
@@ -21,91 +26,35 @@ import maplibreLogo from "../../public/img/maplibre-logo.svg";
             href="https://bsky.app/profile/maplibre.org"
             aria-label="MapLibre on Bluesky"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="14"
-              fill="none"
-              viewBox="0 0 16 14"
-            >
-              <path
-                fill="#fff"
-                d="M3.62 1.163C5.391 2.482 7.3 5.155 8 6.59c.7-1.434 2.607-4.108 4.38-5.427 1.28-.951 3.353-1.688 3.353.655 0 .468-.27 3.93-.43 4.492-.551 1.955-2.563 2.453-4.353 2.151 3.128.528 3.924 2.275 2.206 4.021-3.264 3.318-4.691-.832-5.057-1.895C8.032 10.392 8 10.3 8 10.378c0-.077-.032.014-.099.209-.366 1.063-1.793 5.213-5.057 1.895-1.718-1.746-.922-3.493 2.206-4.02-1.79.301-3.802-.197-4.354-2.152-.159-.562-.43-4.024-.43-4.492C.267-.525 2.34.212 3.62 1.163Z"
-              ></path>
-            </svg>
+            <Image src={bskyIcon} alt="Bluesky icon" height={14} width={16} />
           </a>
           <a
             class="nav-link text-white"
             href="https://mastodon.social/@maplibre"
             aria-label="MapLibre on Mastodon"
           >
-            <svg
-              id="mas"
-              viewBox="0 0 16 16"
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill="white"
-                d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z"
-                style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"
-              ></path>
-            </svg>
+            <Image src={mstdnIcon} alt="Mastodon icon" height={16} width={16} />
           </a>
           <a
             class="nav-link text-white"
             href="https://twitter.com/maplibre"
             aria-label="MapLibre on X"
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 1200 1227"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
-                fill="white"></path>
-            </svg>
+            <Image src={xIcon} alt="X icon" height={16} width={16} />
           </a>
           <a
             class="nav-link text-white"
             href="https://www.linkedin.com/company/maplibre"
             aria-label="MapLibre on Linkedin"
           >
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 72 72"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <g fill="none" fill-rule="evenodd">
-                <path
-                  d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
-                  fill="#fff"></path>
-                <path
-                  d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
-                  fill="#000"></path>
-              </g>
-            </svg>
+            <Image src={linkedin} alt="Linkedin icon" height={18} width={18} />
           </a>
           <a
             class="nav-link text-white"
             href="https://github.com/MapLibre"
             aria-label="MapLibre on GitHub"
           >
-            <svg
-              aria-hidden="true"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 30 30"
-            >
-              <use href="img/github.svg#github"></use>
-            </svg>
+            <Image src={ghIcon} alt="GitHub icon" height={18} width={18} />
           </a>
         </div>
       </div>
