vue-tabler-icons
vue-tabler-icons copied to clipboard
Typescript Linting Error
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>
+1
@.***/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: @.***>
I have the same issue
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;
}
}