Typescript Linting Error

[abhay-agarwal]

When using your library, the following linting error has started to appear in VSCode for me:

Argument of type '{ size: number; strokeWidth: number; "stroke-width": number; }' 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)

I use it as follows:

<template>
<icon-plus :size="20" :stroke-width="1.5" />
</template>
<script setup lang="ts">
import { IconPlus } from '@tabler/icons-vue'
</script>

[steklopod]

+1

[alex-oleshkevich]

@.***/icons-vue` is a different library.

On Sun, Jul 2, 2023, 18:11 Dima Kaltovich @.***> wrote:

+1

— Reply to this email directly, view it on GitHub https://github.com/alex-oleshkevich/vue-tabler-icons/issues/41#issuecomment-1616716878, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAE3HSGDOGBLG2PU35QBI33XOGMU5ANCNFSM6AAAAAAY2D6WQ4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[brunorabelo]

I have the same issue

[brunorabelo]

I managed to solve it by applying a work around.

Created a file named vue_tabler_icon.d.ts under types/... (as you want).

Then used:

import { SVGAttributes, VNodeProps } from 'vue';
declare module '@vue/runtime-dom' {
  export interface HTMLAttributes {
    $children?: VNodeChild;
  }
  export interface SVGAttributes {
    $children?: VNodeChild;
    strokeWidth?: string | number;
  }
}