feat: icon image and sizes

CONTENT.md

@@ -181,8 +181,24 @@ Lorem ipsum dolor sit amet consectetur.
 
 #### Icon
 
+Available sizes are `s`, `m`, `l` and `xl`. Default: `s`.
+
 ```
 {% icon icon="github" /%}
+{% icon icon="github" size="m" /%}
+{% icon icon="github" size="l" /%}
+{% icon icon="github" size="xl" /%}
+```
+
+#### Icon Image
+
+Available sizes are `s`, `m`, `l` and `xl`. Default: `s`.
+
+```
+{% icon_image src="/icon.png" alt="Icon" /%}
+{% icon_image src="/icon.png" alt="Icon" size="m" /%}
+{% icon_image src="/icon.png" alt="Icon" size="l" /%}
+{% icon_image src="/icon.png" alt="Icon" size="xl" /%}
 ```
 
 #### Only Light/Dark Theme

src/markdoc/tags/Icon.svelte

@@ -1,5 +1,13 @@
 <script lang="ts">
-    export let icon: string;
+	export let icon: string;
+	export let size: string = 's';
+
+	const sizes: Record<string, string> = {
+		s: '16px',
+        m: '20px',
+		l: '32px',
+		xl: '40px'
+	};
 </script>
 
-<span class={`icon-${icon}`}></span>
+<span class={`icon-${icon}`} style:font-size={sizes[size]} />

src/markdoc/tags/Icon_Image.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let src: string;
+	export let alt: string;
+	export let size: string = 's';
+
+	const sizes: Record<string, string> = {
+		s: '16px',
+        m: '20px',
+		l: '32px',
+		xl: '40px'
+	};
+</script>
+
+<img {src} {alt} loading="lazy" style:width={sizes[size]} style:vertical-align="middle" />

src/markdoc/tags/_Module.svelte

@@ -5,6 +5,7 @@
 	export { default as Tabs } from './Tabs.svelte';
 	export { default as TabsItem } from './TabsItem.svelte';
 	export { default as Icon } from './Icon.svelte';
+	export { default as Icon_Image } from './Icon_Image.svelte';
 	export { default as Only_Light } from './Only_Light.svelte';
 	export { default as Only_Dark } from './Only_Dark.svelte';
 </script>

src/routes/docs/test/article/+page.markdoc

@@ -55,19 +55,24 @@ But of course you can also have a quote:
 ##### Header 5
 
 1. This is an ordered list following a header.
-2. This is an ordered list following a header.
+1. This is an ordered list following a header.
-3. This is an ordered list following a header.
+1. This is an ordered list following a header.
 
 ###### Header 6
 
 This is a nice table:
 
-| head1 {% width=20 %} | head two             | three                |
+{% icon icon="github" /%}
-| -------------------- | -------------------- | -------------------- |
+{% icon icon="github" size="m"  /%}
-| ![](/favicon.png)    | good swedish fish    | nice                 |
+{% icon icon="github" size="l"  /%}
-| ok                   | good and plenty      | nice                 |
+{% icon icon="github" size="xl"  /%}
-| ok                   | good `oreos`         | hmm                  |
+
-| ok                   | good `zoute` drop    | yumm                 |
+| test {% width=140 %}                                     | head two                                                 | three                                                    |
+| -------------------------------------------------------- | -------------------------------------------------------- | -------------------------------------------------------- |
+| {% icon_image src="/favicon.png" alt="Icon" /%}          | good swedish fish                                        | nice                                                     |
+| {% icon_image src="/favicon.png" alt="Icon" size="m" /%} | good and plenty                                          | nice                                                     |
+| {% icon_image src="/favicon.png" alt="Icon" size="l" /%} | good `oreos`                                             | hmm                                                      |
+| {% icon_image src="/favicon.png" alt="Icon" size="xl" /%} | good `zoute` drop                                        | yumm                                                     |
 
 ### There's a horizontal rule below this.