Svelte Icons Pack

Based on https://github.com/react-icons/react-icons

Demo page

https://leshak.github.io/svelte-icons-pack/

Installation

Bun

bun add svelte-icons-pack

Yarn

yarn add svelte-icons-pack

NPM

npm install svelte-icons-pack --save

Usage v3.x

<script>
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} />

Icons

Icon Library	License	Version	Count
Ant Design SVG icons	MIT	4.4.2	831
Bootstrap Icons	MIT	1.11.3	2050
BoxIcons	CC BY 4.0 License	2.1.4	1634
Circum Icons	MPL-2.0 license	1.0.0	288
Feather	MIT	4.29.1	287
Font Awesome	CC BY 4.0 License	6.5.1	2037
Github Octicons icons	MIT	19.9.0	604
Heroicons	MIT	2.1.3	592
IcoMoon Free	CC BY 4.0 License		491
Ionicons	MIT	7.3.0	1355
Lucide	ISC	0.363.0	1447
Remix Icon	Apache License Version 2.0	4.2.0	2860
Simple Icons	CC0 1.0 Universal	11.10.0	3095
Simple Line Icons	MIT	2.5.5	189
Tabler Icons	MIT	3.1.0	5219
Typicons	CC BY-SA 3.0	2.1.2	336
VS Code Icons	CC BY 4.0	0.0.35	460
Weather Icons	SIL OFL 1.1	2.0.12	219
css.gg	MIT	2.1.1	704

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure icons props using

<script>
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} color="red" size="64" viewBox="0 0 1024 1024" className="custom-icon" title="Custom icon params" />

<style>
  :global(.custom-icon) {
    margin: 100px;
  }
</style>

Key	Default	Notes
`src`	`SvgIcon`
`color`	`undefined` (inherit)
`size`	`1em`
`viewBox`	`undefined`	SVG `viewBox` attribute used if the underlying icon set does nots specify a `viewBox` per SVG.
`className`	`undefined`
`title`	`undefined`	Icon description for accessibility.

Migrating from v2.x -> v3.x

Import path has changed. You need to rewrite from the old style.

<script>
  // Old import style
  import Icon from 'svelte-icons-pack/Icon.svelte';
  import AiOutlineNodeExpand from 'svelte-icons-pack/ai/AiOutlineNodeExpand';
</script>

<Icon src={AiOutlineNodeExpand} />

<script>
  // New import style
  import { Icon } from 'svelte-icons-pack';
  import { AiOutlineNodeExpand } from 'svelte-icons-pack/ai';
</script>

<Icon src={AiOutlineNodeExpand} />

Licence

MIT

Icons are taken from the other projects so please check each project licences accordingly.

Top categories