Based on https://github.com/react-icons/react-icons)
https://leshak.github.io/svelte-icons-pack/#/
yarn add svelte-icons-packnpm install svelte-icons-pack --save<script>
import Icon from 'svelte-icons-pack/Icon.svelte';
import AiOutlineNodeExpand from 'svelte-icons-pack/ai/AiOutlineNodeExpand';
</script>
<Icon src={AiOutlineNodeExpand} />| Icon Library | License | Version |
|---|---|---|
| Ant Design Icons | MIT | 4.0.0 |
| Bootstrap Icons | MIT | 1.0.0-alpha3 |
| BoxIcons | CC BY 4.0 License | 2.0.5 |
| Feather | MIT | 4.21.0 |
| Font Awesome | CC BY 4.0 License | 5.12.1 |
| Heroicons | MIT | 0.4.2 |
| IcoMoon Free | CC BY 4.0 License | 1.0.0 |
| Ionicons | MIT | 4.5.6 |
| Remix Icon | Apache License Version 2.0 | 2.3.0 |
| Simple Icons | CC0 1.0 Universal | 2.13.0 |
| Typicons | CC BY-SA 3.0 | 2.0.9 |
| VS Code Icons | CC BY 4.0 | 0.0.1 |
| Weather Icons | SIL OFL 1.1 | 2.0.10 |
| css.gg | MIT | 2.0.0 |
You can add more icons by submitting pull requests or creating issues.
You can configure icons props using
<script>
import Icon from 'svelte-icons-pack/Icon.svelte';
import AiOutlineNodeExpand from 'svelte-icons-pack/ai/AiOutlineNodeExpand';
</script>
<style>
:global(.custom-icon) {
margin: 100px;
}
</style>
<Icon src={AiOutlineNodeExpand} color="red" size="64" className="custom-icon" title="Custom icon params" />| Key | Default | Notes |
|---|---|---|
src |
SvgIcon |
|
color |
undefined (inherit) |
|
size |
1em |
|
className |
undefined |
|
title |
undefined |
Icon description for accessibility |
MIT
- Icons are taken from the other projects so please check each project licences accordingly.