The entire [iconoir](https://github.com/lucaburgio/iconoir) set (1500+ SVG icons) as Svelte components.
See all available icons on the **iconoir** [homepage](https://iconoir.com/).
## Install
```bash
# npm
npm install @indaco/svelte-iconoir
# pnpm
pnpm add @indaco/svelte-iconoir
# yarn
yarn add @indaco/svelte-iconoir
```
## Usage
```html
```
where:
- ``: named as _PascalCase_ variations of the icon name
- ``:
- `regular` variant is the **default one and does not need to be specified**
- `solid` (check on [iconoir.com](https://iconoir.com) if available)
- ``: the original icon name as per iconoir.com
### Example
```html
```
### Exceptions
The naming convention above has few exceptions breaking it:
1. icons for companies (github, youtube etc.):
- to reflect the real company names (GitHub, YouTube, etc.).
| Icon Name | Component Name |
| :------------ | :--------------- |
| github | GitHubIcon |
| github-circle | GitHubCircleIcon |
| gitlab-full | GitLabFullIcon |
| linkedin | LinkedInIcon |
| tiktok | TikTokIcon |
| youtube | YouTubeIcon |
## Styling Icons
You can apply your own styles to the icon components in different ways:
### 1. Direct
```html
```
### 2. Inline styles
```html
```
### 3. With Tailwind CSS
```html
```
## Properties
Each icon component can take any attribute of a normal SVG Element, for example:
```html
```
In addition to these, each component can take the following properties:
| Property | Type | Default | Description |
| :------- | :--------- | :-------- | :--------------------------------------------- |
| size | `IconSize` | `base` | Set the attributes `width` and `height` |
| altText | `string` | icon name | Set the `aria-labelledby` attribute on the svg |
The underlying properties can also be set and overriden manually, e.g. setting `width` explicitly takes precedence over `size`.
```javascript
/**
* The size of the icon.
* @typedef {(‘xs’|’sm’|’base’|’lg’|’xl’|number|string)} IconSize
*/
```
| Size | Value |
| :--- | -------: |
| xs | `1em` |
| sm | `1.25em` |
| base | `1.5em` |
| lg | `1.75em` |
| xl | `2em` |
## Event Forwarding
The following events are _forwarded_.
| Name |
| :-------------- |
| `on:click` |
| `on:dblclick` |
| `on:keyup` |
| `on:keydown` |
| `on:mouseenter` |
| `on:mouseleave` |
For example, you can set the `on:click` event on all icons.
```html
alert("hi!")} />
```
## Dev Flow
```bash
git clone https://github.com/indaco/svelte-iconoir.git
cd svelte-iconoir
# Install all dependencies
pnpm install # (or npm, yarn)
# Update Iconoir submodule
git submodule update --remote
# Generate Svelte components for each icon
pnpm generate:icons
# Package
pnpm build
## Run postbuild script
pnpm postbuild
```
## License
Free and open-source software under the [MIT License](LICENSE)
