https://github.com/krowten/svelte-heroicons

Heroicons for SvelteKit
https://github.com/krowten/svelte-heroicons

Last synced: 3 months ago
JSON representation

Heroicons for SvelteKit

• Host: GitHub
• URL: https://github.com/krowten/svelte-heroicons
• Owner: krowten
• License: mit
• Created: 2022-01-16T20:30:43.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T11:01:54.000Z (almost 2 years ago)
• Last Synced: 2024-04-24T04:31:50.121Z (7 months ago)
• Language: Svelte
• Size: 688 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-svelte - svelte-heroicons - Icons, crafted by the creators of Tailwind CSS. (UI Components / Icons)

README

        
## Description

[heroicons](https://heroicons.com) for Svelte

See all available icons here: https://krowten.github.io/svelte-heroicons

## Basic Usage

_Note that this library currently only supports Svelte 3+ / SvelteKit._

First, install `svelte-heroicons` from npm:

```sh

npm install --save @krowten/svelte-heroicons

```

Сomponent can be used directly:

```svelte

	import Icon from '@krowten/svelte-heroicons/Icon.svelte';



	

	



```


or each icon can be imported individually as a Svelte component:

```svelte

	import { BeakerIcon } from '@krowten/svelte-heroicons';

	// or import BeakerIcon from '@krowten/svelte-heroicons/icons/BeakerIcon.svelte';



	

	



```


Both icon styles are preconfigured to be stylable by setting the `color` CSS property, either manually or using utility classes like `text-gray-500` in a framework like [Tailwind CSS](https://tailwindcss.com).