https://github.com/indaco/svelte-iconoir

Iconoir SVG icons to Svelte and SvelteKit.
https://github.com/indaco/svelte-iconoir

iconoir icons icons-set svelte sveltekit svg-icons

Last synced: 10 days ago
JSON representation

Iconoir SVG icons to Svelte and SvelteKit.

• Host: GitHub
• URL: https://github.com/indaco/svelte-iconoir
• Owner: indaco
• License: mit
• Created: 2021-10-04T20:43:37.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-09T09:07:34.000Z (about 2 months ago)
• Last Synced: 2024-10-11T12:58:56.391Z (26 days ago)
• Topics: iconoir, icons, icons-set, svelte, sveltekit, svg-icons
• Language: TypeScript
• Homepage: https://www.sveltelab.dev/ron1rnx11t6ai0h
• Size: 654 KB
• Stars: 10
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    
Svelte Iconoir

    

        

    

     

    

        

    

     

    



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

	import { <ComponentName>Icon } from '@indaco/svelte-iconoir/<icon_variant>/<icon_name>';

```

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

	import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

	// or...

	import SunLightIcon from '@indaco/svelte-iconoir/components/SunLightIcon.svelte';

	// variant `solid`

	import { MinusCircleIcon } from '@indaco/svelte-iconoir/solid/minus-circle';

	// or component import

	import MinusCircleIcon from '@indaco/svelte-iconoir/components/solid/MinusCircleIcon.svelte';

```

### 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

	import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

	.roundedColor {

		padding: 4px;

		background-color: yellow;

		border-style: solid;

		border-color: #d1d5db;

	}

```

### 2. Inline styles

```html

	import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

```

### 3. With Tailwind CSS

```html

	import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

```

## 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

	import { SunLightIcon } from '@indaco/svelte-iconoir/sun-light';

 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)