use as a plugin but compile only the icons that are used

[apithy-isidro-martinez]

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?

[alex-oleshkevich]

Yes, you can. For example, in your index.js where you do initialize the Vue application just import needed icons and register them globally.

An example:

// index.js or main.js
import {BoldIcon, DashboardIcon} from 'vue-tabler-icons';

Vue.component('BoldIcon', BoldIcon);
Vue.component('DashboardIcon', DashboardIcon);

new Vue({
  el: '#app,
});

See more in the official docs.

[apithy-isidro-martinez]

well, register a plugin in Nuxt and it worked, thank you very much for responding quickly.

tabler-icons.js

import {
  TagIcon,
  BuildingIcon,
  PlantIcon
} from 'vue-tabler-icons'

import Vue from 'vue'
Vue.component('TagIcon', TagIcon)
Vue.component('BuildingIcon', BuildingIcon)
Vue.component('PlantIcon', PlantIcon)

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/tabler-icons', mode: 'client' },
  ],