Error for stroke-width attribute when using TypeScript

[ronaldtveen]

I'm using the @tablericons/vue package but keep getting an error when using typescript:

Basic example:

<script lang="ts" setup>
import { IconSearch } from '@tabler/icons-vue'
</script>
<template>
  <div>
     <IconSearch :size="18" stroke-width="1" />
  </div>
</template

This returns the error (see screenshot below):

Argument of type '{ strokeWidth: string; size: number; color: string; }' is not assignable to parameter of type 'SVGProps'.
  Object literal may only specify known properties, but 'strokeWidth' does not exist in type 'SVGProps'. Did you mean to write 'stroke-width'?ts(2345)
(property) strokeWidth: string

I have also tried using it is a number via <IconSearch ... :stroke-width="1" />

In tabler-icons-vue.d.ts it says:

4 // Create interface extending SVGAttributes
5 export interface SVGProps extends Partial<SVGAttributes> {
6  size?: 24 | number
7 }

When I add strokeWidth?: 2 | number to it and reload my VSC window, it actually works.

The docs makes it more confusing/inconsistent by saying we should use stroke-with="1.25" but the prop is just stroke (number)?

What is the best way to go about this?

---

Attachment

[danieltamargo]

Update:
If you're facing this problem, checkout next comment!

---

Original answer:
Same happened to me and yes, docs made it more confusing 🤯

As a very quick workaround to avoid those linter errors, I added the following line to tabler-icons-vue.d.ts:

(make sure to reload developer window after adding this line)
After that, you can use both stroke-width="2" (string) or :stroke-width="2" (number) and works fine.

But I'm still confused, strokes are often modified so I guess I'm not understanding something basic or how to configure it properly.
Hope someone can help us 🤍

[danieltamargo]

Hi!! I'm back with a simpler (and cleaner) way to avoid this linter error. I created a tabler-icons.d.ts file and added the following code

export {};

declare module "@tabler/icons-vue" {
    interface SVGProps {
        strokeWidth?: number | string;
    }
}

So now I don't need to modify package files (yaaay 🎉).

If creating a whole separated file feels "heavy", you can move it to any common.d.ts or global.d.ts or w/e file you use for type declarations (I usually use global.d.ts for declaring global window attached variables like window.axios or w/e so my typescript doesn't scream everytime I access those variables) (dunno if that's a good practice, I'm learning with baby steps).

I found the solution following this post: Extending Global or Third Party Library Typing by malcolmkee

Hope this helps!

[BG-Software-BG]

Resolved by PR #763