LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: icon image and sizes

Browse Source
This commit is contained in:
Torsten Dittmann
2023-09-21 00:00:56 +02:00
parent 0f916f298b
commit 54ab86c65d
5 changed files with 54 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
CONTENT.md
View File

@@ -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

10
src/markdoc/tags/Icon.svelte
View File

@@ -1,5 +1,13 @@
<script lang="ts">
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]} />

14
src/markdoc/tags/Icon_Image.svelte Normal file
View File

@@ -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" />

1
src/markdoc/tags/_Module.svelte
View File

@@ -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>

21
src/routes/docs/test/article/+page.markdoc
View File

@@ -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.
3. This is an ordered list following a header.
1. 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 |
| -------------------- | -------------------- | -------------------- |
| ![](/favicon.png) | good swedish fish | nice |
| ok | good and plenty | nice |
| ok | good `oreos` | hmm |
| ok | good `zoute` drop | yumm |
{% icon icon="github" /%}
{% icon icon="github" size="m" /%}
{% icon icon="github" size="l" /%}
{% icon icon="github" size="xl" /%}
| 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.