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

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS (for Svelte)
https://github.com/fvilers/heroicons-svelte

components heroicons icons svelte sveltekit tailwindcss

Last synced: 7 days ago
JSON representation

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS (for Svelte)

• Host: GitHub
• URL: https://github.com/fvilers/heroicons-svelte
• Owner: fvilers
• License: mit
• Created: 2024-10-28T11:08:52.000Z (11 days ago)
• Default Branch: main
• Last Pushed: 2024-10-28T12:01:03.000Z (11 days ago)
• Last Synced: 2024-10-28T14:18:08.094Z (11 days ago)
• Topics: components, heroicons, icons, svelte, sveltekit, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 62.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

      

      

      

    

  



Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.




  Browse at Heroicons.com →



## Basic Usage

First, install `@fvilers/heroicons-svelte` from npm:

```sh

npm install @fvilers/heroicons-svelte

```

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

```html

  import { BeakerIcon } from "@fvilers/heroicons-svelte/24/solid";



  

  
...



```


The 24x24 outline icons can be imported from `@fvilers/heroicons-svelte/24/outline`, the 24x24 solid icons can be imported from `@fvilers/heroicons-svelte/24/solid`, the 20x20 solid icons can be imported from `@fvilers/heroicons-svelte/20/solid`, and 16x16 solid icons can be imported from `@fvilers/heroicons-svelte/16/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG →](https://unpkg.com/browse/@fvilers/heroicons-svelte/24/outline/)

## License

This library is MIT licensed.