benflap / 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:

• Search on tabler-icons.io
• View component names

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

tabler-icons-svelte's Issues

css properties?

is there any way that we could build this so that it will also work with css properties? I'm using Tailwind CSS and specifying colors and what not through props really doesn't fit well

See how this icon set works
https://github.com/AnxiousDarkly/svelte-icons

build time

This is great! Excited to use it, but it seems to increase build time for me by about 6 seconds (1.8s to 8.6s) and really slows things down. Any way to optimize it?

Support vector-effect="non-scaling-stroke"

Sometimes it's wanted to exactly define the strokeWidth and prevent it from upscaling, for example large chevrons for navigation.

Currently, the larger the size, the bolder the stroke. Currently to get a 1px stroke for a 48 size I have to calculate the stroke width based on the 24 size:

<ChevronDown size={64} strokeWidth={1/(64/24)} />

What would be nice:

<ChevronDown size={64} strokeWidth={1} nonScalingStroke />

vite-plugin-svelte warning: The following packages have a svelte field in their package.json but no exports condition for svelte

i use SvelteKit with [email protected] and show this warning

3:47:39 PM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

@tabler/[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

can we fix this ?

Update tabler-icons to 1.35.0

The new version of tabler icons has been released.

svelte kit complains at run time

All I'm doing is

import { DeviceFloppy, CircleX } from 'tabler-icons-svelte';

not even using the icons in the template it complains then crashes the app when i visit a page where i import

in browser

500
Failed to fetch dynamically imported module: http://localhost:3000/src/routes/project/[projectId]/__layout.svelte
TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/routes/project/[projectId]/__layout.svelte

in console

Debugger attached.
yarn run v1.22.15
warning package.json: No license field
$ svelte-kit dev
Debugger attached.

  SvelteKit v1.0.0-next.201

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


tabler-icons-svelte is incorrectly packaged. Please contact the package author to fix.

typescript support

getting a bunch of errors running svelte-check

Hint: Could not find a declaration file for module 'tabler-icons-svelte'. 'sveltail/node_modules/tabler-icons-svelte/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/tabler-icons-svelte` if it exists or add a new declaration (.d.ts) file containing `declare module 'tabler-icons-svelte';` (ts)
  import Markup from './Markup.svelte';
  import { BrandGithub, BrandTwitter } from 'tabler-icons-svelte';
</script>