Based on https://github.com/react-icons/react-icons)
https://leshak.github.io/svelte-icons-pack/#/
yarn add svelte-icons-pack
npm 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.2.1 |
Bootstrap Icons | MIT | 1.8.3 |
BoxIcons | CC BY 4.0 License | 2.1.2 |
Feather | MIT | 4.21.0 |
Font Awesome | CC BY 4.0 License | 5.15.4 |
Heroicons | MIT | 1.0.6 |
IcoMoon Free | CC BY 4.0 License | 1.0.0 |
Ionicons | MIT | 5.2.3 |
Remix Icon | Apache License Version 2.0 | 2.5.0 |
Simple Icons | CC0 1.0 Universal | 7.4.0 |
Typicons | CC BY-SA 3.0 | 2.1.2 |
VS Code Icons | CC BY 4.0 | 0.0.12 |
Weather Icons | SIL OFL 1.1 | 2.0.12 |
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.