This package provide the entire iconoir set (900+ SVG icons) to be used with SvelteKit. It is based on the official iconoir project.
See all available icons on the iconoir homepage
# pnpm
pnpm install @indaco/svelte-iconoir
# npm
npm install @indaco/svelte-iconoir
# yarn
yarn add @indaco/svelte-iconoirEach icon is available to be used/imported following the CamelCase notation.
<script>
import { SunLightIcon } from '@indaco/svelte-iconoir';
// use THIS approach for production
import ListIcon from '@indaco/svelte-iconoir/icons/ListIcon.svelte';
</script>
<ListIcon />
<SunLightIcon class="roundedColor" />
<style>
.roundedColor {
padding: 4px;
background-color: yellow;
border-style: solid;
border-color: #d1d5db;
}
</style><script>
import View360Icon from '@indaco/svelte-iconoir/icons/View360Icon.svelte';
</script>
<View360Icon
style="background-color: green; padding: 4px; border-radius: 9999px;"
color="#ffffff" /><script>
import ActivityIcon from '@indaco/svelte-iconoir/icons/ActivityIcon.svelte';
</script>
<ActivityIcon class="p-1 rounded-full border-2 bg-green-400" size="2.5em" />You can also override the click, dblclick events on an element.
<script>
import ActivityIcon from '@indaco/svelte-iconoir/icons/ActivityIcon.svelte';
</script>
<ActivityIcon class="p-1 rounded-full border-6 bg-blue-300" on:click={() => alert("hi!")} size="2.5em" />The Iconoir component has the following properties to allow you customing the rendered svg:
| Property | Type | Required | Description |
|---|---|---|---|
| icon | Object | Yes | Icon data object to render, with 2 properties: name and data). |
| alt | String | No | Set the alt attribute on the rendered svg (defaults to icon's name). |
| size | String | No | Override the icon's size (defaults to 1.5em). |
| color | String | No | Override the icon's colour (defaults to currentColor). |
| style | String | No | Set the style attribute on the rendered svg. |
| class | String | No | Set the class attribute on the rendered svg. |
Free and open-source software under the MIT License