benflap / tabler-icons-svelte Goto Github PK

The new version of tabler icons has been released.

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?

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

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 ?

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.

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>

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