Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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).