tabler-icons-svelte Svelte Themes

Tabler Icons Svelte

A library of SVG Svelte components for Tabler Icons.

tabler-icons-svelte

This package is no longer supported

Use @tabler/icons-svelte instead.


A library of Svelte components for Tabler Icons.

A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.

Installation

# yarn
yarn add tabler-icons-svelte --dev

# npm
npm install tabler-icons-svelte  --save-dev

tabler-icons-svelte needs to be added as a dev dependency as Svelte requires original component source

Usage

Import components inside of the <script> and use like any other Svelte component.

Find icons:

Import Components From Package

The easiest way to use the icon components is by importing them from the package.

<script>
    import { CurrencyBitcoin, BrandGithub, CircleX } from "tabler-icons-svelte";
</script>

<CurrencyBitcoin />
<BrandGithub />
<CircleX />

Import Components From File

If your build times are high, import the components from their svelte files.

<script>
    import Volume2 from "tabler-icons-svelte/icons/Volume2.svelte";
    import CurrencyBitcoin from "tabler-icons-svelte/icons/CurrencyBitcoin.svelte";
</script>

<Volume2 />
<CurrencyBitcoin size="2rem" />

Props

The components each accept 4 optional props:

Prop Default Description
size 24 The size of the Icon. Measured in pixels if no other unit is passed.
color currentColor Any valid CSS <color>.
strokeWidth 2 The SVG's stroke width. Measured in pixels if no other unit is passed.
class undefined Classes that are passed down to the SVG.

Development Workflow

See CONTRIBUTING.md

License

MIT

Top categories

Loading Svelte Themes