Not really an issue, but more if a question. I've used the Vue import to bring in all icons, but is there anyway to generically instantiate the icon without the custom component? I'm trying something like this, but it seems... inefficient:

        <template v-if="iconName=='OneTwoThreeIcon'"><OneTwoThreeIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='TwentyFourHoursIcon'"><TwentyFourHoursIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='TwoFactorAuthIcon'"><TwoFactorAuthIcon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='Deg360Icon'"><Deg360Icon :size="size" :stroke-width="strokewidth" /></template>
        <template v-else-if="iconName=='Deg360ViewIcon'"><Deg360ViewIcon :size="size" :stroke-width="strokewidth" /></template>

What I'm trying to do is something more like:
<TablerIcon :iconName="sMyObject.icon" :size="28" />

Cheers!

Hi @alex-oleshkevich
We'll much appreciate if you could release this with the latest Tabler Icons.
Thanks so much :)

@codecalm has released a crazy amount of icons to tabler-icons in the last couple of weeks.

I'm stuck using a Vue2 app in which I would love to use some of those icons too.
Could you do an up-to-date release in the v1.x branch?

It would be great to have this functionality, I can try to make a PR. What do you think?

Hi!

First of all, thank you for your work!

I think it will be the good option to set stroke-width globally for all icons.
What do you think about this?

Hey,

After I npm i vue-tabler-icons@^1.0 I get the error below.
I'm stuck with Vue2 for the moment and I realise this is not a priority of this project any more, but it is either this or a different library, so yeah 🤷🏼‍♂️

✖ Mix
  Compiled with some errors in 10.97s

ERROR in ./node_modules/vue-tabler-icons/dist/vue-tabler-icons.es.js 1:0-67
Module not found: Error: Can't resolve '@vue/babel-helper-vue-jsx-merge-props' in '/Users/ronaldt/Sites/crm.test/node_modules/vue-tabler-icons/dist'

webpack compiled with 1 error

I temp fixed this by adding the module manually via npm i -D @vue/babel-helper-vue-jsx-merge-props, which is stated it should never be done;

This tool is used internally and there is no reason for you to ever use it.

It now compiles normally;

✔ Compiled Successfully in 10420ms

I can now continue migrating the icons over, but still hoping you can correct this somehow?

What is the best way to set the icon name dynamically based on a variable? I tried this way and it works, but I don't know if there's a better way to do it.

<component :is="status ? chevron-right-icon':'chevron-left-icon'" />

<script>
export default {
  data () {
    return {
      status: true
    }
  }
}
</script>

If this way is correct, you may update the readme with this info

First of all thank you for your amazing work.
I was looking for shopping-bag icon but i can't found it in Vue2 library

Hi there,

Could you please update the library to use [email protected]? There are lots of new icons since v1.14.2 which is currently used.

By the way, thanks for your work, it saves time quite a lot!

for example <InfoCircleIcon size="12" />
it still remains large.

When using npm install vue-tabler-icons, it's installing version ^1.13.0 rather than the latest version of Tabler needed for Vue3, this in turn introduces a whole range of errors when trying to compile. Even when using @latest the same experience is provided, to overcome this npm install vue-tabler-icons@^2.5.0 needed to be used and this is working in my project now and without any errors.

Hello, first I wanted to thank you for creating the package I have been using it for about a year now, thank you very much for this.

On the other hand, I see that a few weeks ago new 2.0+ versions have been released and I would like to use these new icons. Is there any chance to get an update soon?

Hello 👋
The cross inside the "CircleX" icon is not displayed correctly 🤔

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>

Currently, the library ships with pre-built bundles that are ready to be used without any bundles. Just attach a script link and it works.
Since now, this behavior is unwanted and deprecated. These files take up to 5mb and no none should want it.

Alternatives

1. use bundler with tree shaking and include only icons you want in your app
2. use simple SVG from https://tabler-icons.io in your apps.

There are quite a few new icons added in 1.66 and 1.67 as well as a handful in the releases since.
It would be much appreciated if this package could be synced with the latest!

Thanks in advanced and thanks for this plugin! <3

actually i use the package as a plugin in NuxtJs like the doc says but this compiles all the icons even those that i'm not using

import Vue from 'vue';
import VueTablerIcons from 'vue-tabler-icons';

Vue.use(VueTablerIcons);

i know that the other aproach is import the icon that im going to use like this

<script>
    // MyComponent.vue
    import { BoldIcon } from 'vue-tabler-icons';

    export default {
        components: { BoldIcon },
    };
</script>

<template>
    <bold-icon />
</template>

but I would like to import only the icons I need into a single file and then that file add it to the vue instance, like fontAwesome does ... is that possible?

When used with Vue3/Nuxt3, all passed CSS classes are added twice to resulting markup.

Environment

Steps to reproduce

1. Create app with Vue CLI,
2. Add and install vue-tabler-icons
3. Import and display an icon in a template
4. Go to check application on IE11

Expected Behavior

Actual Behavior

Other comment

When importing this module via: import VueTablerIcons from 'vue-tabler-icons';
it will throw an error when compiling for every individual icon:

Module not found: Error: Can't resolve 'babel-helper-vue-jsx-merge-props' in '<snip>\node_modules\vue-tabler-icons\icons'
 @ ./node_modules/vue-tabler-icons/icons/AntennaBars2Icon.js 1:0-62 17:20-34
 @ ./node_modules/vue-tabler-icons/icons.js
 @ ./node_modules/vue-tabler-icons/index.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Hi, is any plans for future configuration of the default options? For example, set stroke-width on all icons in one config file?

Now it is in const variable

Seems like no https://tabler-icons.io/i/eye-closed in the package.

In https://github.com/alex-oleshkevich/vue-tabler-icons/blob/master/build.js#L24

const allAttrs = {
    ...this.$data,
    width: attrs.width || size,
    height: attrs.height || size,
}

...this.$data will inject all the available data inside the element and it will cause errors when using libraries/plugins that adds data to Vue components like @vue/apollo-option.

Vue Apollo will allow all components in the application to have an $apolloData object inside this.$data and the Icon will try to put $apolloData inside the <svg {...allAttrs} ... tag.

It will cause:

 Failed to execute 'setAttribute' on 'Element': '$apolloData' is not a valid attribute name.