search

leshak / svelte-icons-pack

MIT License
61 stars 3 forks source link

readme

Svelte Icons Pack

npm

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