svelte-ionicons-new v0.4.2

Ionicon components for Svelte/SveltKit. Svelte-Ionicons support all CSS frameworks.

Installation

npm i -D svelte-ionicons

Icon list

Icon list

Icon images

Icon images

Usages

<script>
	import { AddSharp	} from 'svelte-ionicons';
</script>

<AddSharp size="40" />

Faster compiling

For faster compilation, you can import the icon directly.

<script>
  import AddSharp from 'svelte-ionicons/AddSharp.svelte';
</script>

<AddSharp />

If you are TypeScript user, this require "typescript": "^5.0.0".

As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

{
  //...
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

REPL

REPL

Props

Size

Use the size prop to change the size of icons.

<WalkSharp size="30" />
<WalkSharp size="40" />
<WalkSharp size="50" />

class

Use the class prop to add additional CSS. This supports all CSS frameworks.

// Tailwind CSS
<AddSharp size="40" class="px-5" />

// Bootstrap
<AddSharp size="40" class="position-absolute top-0 px-1" />

aria-label

All icons have aria-label. For example Bandage has aria-label="bandage". Use ariaLabel prop to modify the aria-label value.

<Bandage ariaLabel="bandage icon"></Bandage>

Unfocusable icon

If you want to make an icon unfocusable, add tabindex="-1".

<Bandage tabindex="-1" />

Passing down other attributes

You can pass other attibutes as well.

<Bandage tabindex="0"></Bandage>

Import all

Use import * as Icon from 'svelte-heros.

<script>
	import * as Icon from 'svelte-ionicons';
</script>

<Icon.Bandage size="30" />
<Icon.WalkSharp size="40" class="mx-4" />

Original source

• Ionicons
• Ionicons GitHub Repo

Other icons

• Svelte-Icon-Sets

Experience lightning-fast browsing and offline access with Our PWA

This website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".