enhancement/issue 71 acquire svgs for all assets

src/components/run-anywhere/platforms.json

@@ -1,22 +1,22 @@
 [
   {
     "name": "Vercel",
-    "icon": "/assets/vercel.svg",
+    "icon": "vercel",
     "link": "/guide/deploy/vercel/"
   },
   {
     "name": "Netlify",
-    "icon": "/assets/netlify.png",
+    "icon": "netlify",
     "link": "/guide/deploy/netlify/"
   },
   {
     "name": "NodeJS",
-    "icon": "/assets/node.png",
+    "icon": "nodejs",
     "link": "/guide/deploy/nodejs/"
   },
   {
     "name": "GitHub",
-    "icon": "/assets/github.svg",
+    "icon": "github",
     "link": "/guide/deploy/github-pages/"
   }
 ]

src/components/run-anywhere/run-anywhere.js

@@ -1,6 +1,17 @@
 import platforms from "./platforms.json" with { type: "json" };
+import githubLogo from "../../assets/github.svg?type=raw";
+import netlifyLogo from "../../assets/netlify.svg?type=raw";
+import nodejsLogo from "../../assets/nodejs.svg?type=raw";
+import vercelLogo from "../../assets/vercel.svg?type=raw";
 import styles from "./run-anywhere.module.css";
 
+const platformImageMapper = {
+  github: githubLogo,
+  netlify: netlifyLogo,
+  nodejs: nodejsLogo,
+  vercel: vercelLogo,
+};
+
 export default class RunAnywhere extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
@@ -16,7 +27,7 @@ export default class RunAnywhere extends HTMLElement {
               return `
                 <div class="${styles.platformBox}">
                   <div class="${styles.iconBox}">
-                    <img class="${styles.icon}" src="${icon}" alt="${name} logo"/>
+                    ${platformImageMapper[icon]}
                   </div>
 
                   <a class="${styles.iconLink}" href="${link}">${name}</a>

src/components/run-anywhere/run-anywhere.module.css

@@ -40,8 +40,9 @@
   padding: var(--size-fluid-2);
 }
 
-.icon {
-  width: 100px;
+.iconBox svg {
+  width: 100%;
+  height: 100%;
 }
 
 .iconLink {