@inqling/svelte-heroicons v0.0.3

Svelte Heroicons

Why this package?

Copying SVG code into your project can become tedious and messy if you don't need to edit the SVG markup. This library simply makes it easier to import each icon and have it scale based on it's inherited font-size.

Find the original repository for Heroicons on Github: tailwindlabs/heroicons

Basic Usage

<script>
	import { AcademicCap } from "@inqling/svelte-heroicons";
</script>

<style>
	.icon {
		font-size: 40px;
		color: red;
	}
</style>

<div class="icon"><AcademicCap /></div>

importing icons from @inqling/svelte-heroicons will use solid icons by default. You can manually import outline icons from @inqling/svelte-heroicons/outline. Example:

<script lang="ts">
	import { AcademicCap } from "@inqling/svelte-heroicons/outline";
</script>

To improve performance and bundle size, you can import icons directly: @inqling/svelte-heroicons/svg/<type>/<icon>.svelte

Example:

<script lang="ts">
	import Icon from "@inqling/svelte-heroicons/svg/outline/academic-cap.svelte";
</script>

Styling

• The icon will scale in size so that the height of the icon is the current font-size.
• The icon will inherit the current text color.

To-do

• Add SVG component that loads paths dynamically.
• Include a component to dynamically set the icon. Ex <Icon type="icon-name" />.

License

This library is MIT licensed.