I wanted to put together a set of icons to use inside of the blog.

I’ve imported icons from the

I’m only using icons based on SVG images so that I can scale them up and down to use them on individual blog Pages as well as tags for the tagging system built into the site.

I’ve added these icons into a component Library in the $lib directory so that they can be imported directly, I’ve also added them to an index.ts file which is combines them into a dictionary so that I can import them via a name and use in <svelte:component /> component.

The direct import style:

<script>
	import { Svelte } from '$lib/components/icons';
</script>

...

<Svelte />

Which display as the following:

The icons can also be ustilize as follows:

<script>
	import { iconMap } from '$lib/components/icons';
	const comp = iconMap['go'];
</script>

...

<svelte:component this={comp} />

Which display as the following:

Or like this:

<script>
	import { iconMap } from '$lib/components/icons';
</script>

...

<svelte:component this={iconMap['markdown']} />

Which display as the following: