bfg-lazaro/svelte-tabler

Svelte-Tabler

1970+ SVG Tabler Icons components for Svelte. Svelte-Tabler support major CSS frameworks using the class props.

Icon name list

Icon list

Installation

npm i -D svelte-tabler

REPL

• Demo 1
• Demo 2

Usages

In a svelte file:

<script>
  import { Folders, GitMerge } from 'svelte-tabler';
</script>

<Folders />
<GitMerge />

Size

Use the size prop to change the size of icons.

<Folders size="40" /> <GitMerge size="40" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<Folders color="#c61515" /> <GitMerge color="#3759e5" />

CSS framworks suport

Use the class prop to change size, colors and add additional css.

Tailwind CSS example:

<Folders class="h-24 w-24 text-blue-700 mr-4" />

Bootstrap examples:

<Folders class="position-absolute top-0 px-1" />

Dark mode

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let's use dark for the dark mode class as an example.

<Folders class="text-blue-700 dark:text-red-500" />

aria-label

All icons have aria-label. For example FolderMinus has aria-label="folder minux". Use ariaLabel prop to modify the aria-label value.

<FolderMinus ariaLabel="folder minux svg icon" />

Passing down other attributes

You can pass other attibutes as well.

<FolderMinus tabindex="0" />

Using svelte:component

<script>
  import { FolderMinus } from 'svelte-tabler';
</script>

<svelte:component this="{FolderMinus}" />

Using onMount

<script>
  import { FolderMinus } from 'svelte-tabler';
  import { onMount } from 'svelte';
  const props = {
    size: '50',
    color: '#ff0000'
  };
  onMount(() => {
    const icon = new FolderMinus({ target: document.body, props });
  });
</script>

Import all

Use import * as Icon from 'svelte-tabler.

<script>
  import * as Icon from 'svelte-tabler';
</script>

<Icon.FolderMinus />
<Icon.GitMerge />

<h1>Size</h1>
<Icon.FolderMinus size="30" />
<Icon.GitMerge size="40" />

<h1>CSS HEX color</h1>
<Icon.GitMerge color="#c61515" size="40" />

<h1>Tailwind CSS</h1>
<Icon.FolderMinus class="text-blue-500" />
<Icon.GitMerge class="text-pink-700" />

Other icons

• Svelte-Icon-Sets