luxbe/svelte-iconoir

Iconoir SVG icons to Svelte and SvelteKit.

Svelte Iconoir

   

Svelte Iconoir

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

See all available icons on the iconoir homepage

[email protected] matches [email protected]

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

where:

• : icon name as CamelCase notation
• <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';
</script>

Note: you can still import and use the icon as import { <component_name>Icon } from '@indaco/svelte-iconoir'; but this will have performace issue when the server run due to the import of the entire icons set.

Exceptions

The naming convention above has few exceptions breaking it:

1. icons whose name starts with a number:
   • to be a valid Svelte component it must start with capital letter, refer to Template Syntax Tags;
2. icons for companies (github, youtube etc.):
   • to reflect the real company names (GitHub, YouTube, etc.).

Icon Name	Component Name
1st-medal	Medal1stIcon
2x2-cell	Cell2x2Icon
3d-add-hole	AddHole3dIcon
3d-arc-center-pt	ArcCenterPt3dIcon
3d-arc	Arc3dIcon
3d-bridge	Bridge3dIcon
3d-center-box	CenterBox3dIcon
3d-draft-face	DraftFace3dIcon
3d-ellipse-three-pts	EllipseThreePts3dIcon
3d-ellipse	Ellipse3dIcon
3d-pt-box	PtBox3dIcon
3d-rect-corner-to-corner	RectCornerToCorner3dIcon
3d-rect-from-center	RectFromCenter3dIcon
3d-rect-three-pts	RectThreePts3dIcon
3d-select-edge	SelectEdge3dIcon
3d-select-face	SelectFace3dIcon
3d-select-point	SelectPoint3dIcon
3d-select-solid	SelectSolid3dIcon
3d-three-pts-box	ThreePtsBoxe3dIcon
4k-display	Display4kIcon
360-view	View360Icon
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 { View360Icon } from '@indaco/svelte-iconoir/360-view';
</script>

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

3. With Tailwind CSS

<script>
 import { ActivityIcon } from '@indaco/svelte-iconoir/activity';
</script>

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

Properties

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

Property	Type	Default	Description
color	string	none	Set the fill colour to be applied to the icon
strokeWidth	number	1.5	Set the width of the stroke to be applied to the icon
style	string		Set the style attribute on the rendered svg
class	string		Set the class attribute on the rendered svg
...

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 {('sm'|'base'|'lg'|'xl'|'2xl'|number)} IconSize
 */

Size	Value
sm	0.875rem
base	1rem
lg	1.125rem
xl	1.25rem
2xl	1.5rem

Event Forwarding

All SVG Element events are forwarded. For example, you can set the on:click event on all icons.

<script>
 import { ActivityIcon } from '@indaco/svelte-iconoir/activity';
</script>

<ActivityIcon class="p-1 rounded-full border-6 bg-blue-300" on:click={() => alert("hi!")} size="2.5em" />

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