Skip to content

Latest commit

 

History

History
88 lines (58 loc) · 2.77 KB

README.md

File metadata and controls

88 lines (58 loc) · 2.77 KB
Raw

tabler-icons-svelte

This package is no longer supported

Use @tabler/icons-svelte instead.

npm version npm downloads MIT License

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