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.
# 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
Import components inside of the <script>
and use like any other Svelte component.
Find icons:
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 />
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" />
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. |
See CONTRIBUTING.md