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

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