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.