@lil-icons/svelte v1.0.1

lil-icons

Demo

Installation

npm install @lil-icons/svelte

or

yarn add @lil-icons/svelte

Usage

1. Wrap your app in LilIconsContext:

<script>
    import { LilIconsContext } from '@lil-icons/svelte';
</script>

<LilIconsContext>
    ...
</LilIconsContext>

2. Use icon as a common component:

<script>
    import { IconSuccess } from '@lil-icons/svelte';
</script>

<div>
    <IconSuccess />
</div>

You can declare props once in LilIconsContext and they will be passed down to all the icons. It uses Context API:

<LilIconsContext color="green" width="64" height="64">
  <IconSuccess /> // green 64x64
</LilIconsContext>

Icon props have a higher priority than context props:

<LilIconsContext color="green">
  <IconSuccess color="red" /> // red
</LilIconsContext>

You can get values from context in your custom components:

<script>
  import { getContext } from 'svelte';
  const { color, width, height } = getContext('lilIconsContext');
</script>

<svg color={color} width={width} height={height}>
    ...
</svg>

Props