Svelte Heroicons
> If you want to use more Icons Packs and components for multiple Frameworks (React, Vue, Lit and more), check out [@steeze-ui/icons](https://github.com/steeze-ui/icons) which is meant as a successor to svelte-hero-icons:
### What is @steeze-ui/Icons ?
- Icon Components for various frameworks (svelte, lit, solid and react)
- Icon Packs (e.g heroicons, radix-icons, feathericons and more)
- A template to create your own publishable Icon Pack
- Now lives under an org that will focus on more ui tools for svelte
---
## Description
- complete [heroicons](https://heroicons.dev/) set optimized for svelte
- programatically change solid or outline version based on the `solid` attribute (solid, mini, micro)
- fully typed for a great IDE experience
- works out of the box with SvelteKit
- SSR compatible (no JS is needed for the client to display the icon)
## Installation
- install as `devDependency`
### Example for npm
```bash
npm i -D svelte-hero-icons
```
## Configuration
## [SvelteKit](https://github.com/sveltejs/kit)
- svelte-hero-icons should work with SvelteKit `without any configuration`
- If you have any problems, this could help adding to your `vite.config.js`:
```js
ssr: {
noExternal: ["svelte-hero-icons"],
}
```
## Usage
- Default is Outline version of icon
- Use **solid** attribute for Solid Icons
```html
```
### Use with types
```svelte
```
## Author
This package is based on [heroicons](https://github.com/refactoringui/heroicons)
See all available icons here: https://github.com/refactoringui/heroicons