Sleek Icons

Truly Sveltesque icon components powered by Google Material Symbols.

Installation

pnpm add @sv-sleek/icon

Setup

Include the font provider once in your app:

<script>
	import { IconFontProvider } from '@sv-sleek/icon';
</script>

<IconFontProvider />
<!-- Rest of your app -->

Usage

<script>
	import Icon from '@sv-sleek/icon';
</script>

<!-- Normal variant -->
<Icon name="home" />

<!-- Filled variant -->
<Icon name="home" filled />

Styling

Icons inherit all CSS properties from their parent:

<div class="large-red">
	<Icon name="star" />
</div>

<button class="action-button">
	<Icon name="check" />
</button>

<style>
	.large-red {
		font-size: 3rem;
		color: tomato;
	}

	.action-button {
		color: white;
		font-size: 1rem;
	}
</style>