@indaco/svelte-iconoir

Svelte Iconoir

   

The entire iconoir set (1500+ SVG icons) as Svelte components.

See all available icons on the iconoir homepage.

Install

# npm
npm install @indaco/svelte-iconoir

# pnpm
pnpm add @indaco/svelte-iconoir

# yarn
yarn add @indaco/svelte-iconoir

Usage

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

where:

• <ComponentName>: named as PascalCase variations of the icon name
• <icon_variant>:
  • regular variant is the default one and does not need to be specified
  • solid (check on iconoir.com if available)
• <icon_name>: the original icon name as per iconoir.com

Example

<script>
	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';
</script>

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

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

<SunLightIcon class="roundedColor" />

<style>
	.roundedColor {
		padding: 4px;
		background-color: yellow;
		border-style: solid;
		border-color: #d1d5db;
	}
</style>

2. Inline styles

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

<SunLightIcon
	style="background-color: green; padding: 4px; border-radius: 9999px;"
	color="#ffffff"
/>

3. With Tailwind CSS

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

<SunLightIcon class="p-1 rounded-full border-2 bg-green-400" size="xl" />

Properties

Each icon component can take any attribute of a normal SVG Element, for example:

<ZoomOutIcon fill="red" stroke-width="3" />

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.

/**
 * 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.

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

<SunLightIcon on:click="{()" =""> alert("hi!")} /></SunLightIcon>

Dev Flow

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