svelte-icons-pack v3.1.3

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

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>

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.