@indaco/svelte-iconoir v6.1.0

Svelte Iconoir

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

See all available icons on the iconoir homepage

svelte-iconoir@6.1.x matches iconoir@7.1.0

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.).

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:

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

Event Forwarding

The following events are forwarded.

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!")} />

Dev Flow

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

cd svelte-iconoir

# Install all dependencies
pnpm install # (or npm, yarn)

# 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