Prepare icons component

Author: Frontendland

src/components/Icon/Icon.astro

@@ -0,0 +1,18 @@
+---
+const {
+    type,
+    size = 24,
+    color
+} = Astro.props
+
+const { default: innerHTML } = await import(`../../icons/${type}.js`);
+
+---
+
+<svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    color={color}
+    set:html={innerHTML}
+/>

src/components/Icon/Icon.svelte

@@ -0,0 +1,17 @@
+<script>
+    export let type
+    export let size = 24
+    export let color
+
+    const icon = () => import(`../../icons/${type}.js`)
+</script>
+
+{#await icon() then module}
+    <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        color={color}
+    >{@html module.default}</svg>
+{/await}
+

src/components/Icon/Icon.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react'
+
+import github from '../../icons/github'
+
+export const Icon = ({
+    type,
+    size = 24,
+    color
+}) => {
+    const [icon, setIcon] = useState('')
+
+    useEffect(() => {
+        (async () => {
+            const icon = (await import(`../../icons/${type}.js`)).default;
+
+            setIcon(icon)
+        })()
+    }, [])
+
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            color={color}
+            dangerouslySetInnerHTML={{ __html: github }}
+        />
+    )
+}
+