Tree Shaking - automatically detecting usage

Looking at the recommended usage

src/main.js

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

src/App.vue

<template>
  <div id="app">
    <font-awesome-icon icon="user-secret" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

And then the tree shaking docs:

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'
import { faSpinner } from '@fortawesome/pro-light-svg-icons/faSpinner'

library.add(faCoffee, faSpinner)

Is your feature request related to a problem? Please describe. Having to call library.add(faCoffee) is a pain. Using about 80 icons in a bigger project, keeping this up-to-date isn’t nice.

Describe the solution you’d like Shouldn’t the usage like <font-awesome-icon icon="user-secret" /> suffice to be able to dynamically import only those icons? Especially when using webpack/rollup to parse it.

Describe alternatives you’ve considered N/A

Additional context N/A

[GTANAdam]

Okay, as promised, here’s my repository https://github.com/GTANAdam/vue-fontawesome-autogen

[GTANAdam]

Might just do that, it will at least help with the arrays everywhere, the only downside being having to pass through all the other props.

Excited to see what they have planned for 6, hopefully it tackles this.

To me the bigger pain is the imports and library call anywhere you want to use an icon. (Yes I could centralize it to a single file but then you have to do book keeping and if you change or delete an icon somewhere you have to do code base garbage collection making sure there’s no other references) so doing it in place everywhere it’s used is surprisingly the more manageable option.

Lmao, I was about to quote all of the above, thankfully I wasn’t lazy enough to edit the quotation.

Yeah well, you only have to set up the component once and make it global, it will act like a shim or proxy or whatever you want to call it. you can find the props here: https://github.com/FortAwesome/vue-fontawesome/blob/2.x/src/components/FontAwesomeIcon.js

You can have my little template, the rest you can complete from that file I have linked

<template >
  <font-awesome-icon :icon="getIcon" :border="border" :fixedWidth="fixedWidth" :flip="flip" :mask="mask"
    :listItem="listItem" :pull="pull" :pulse="pulse" :rotation="rotation" :swapOpacity="swapOpacity" :size="size"
    :spin="spin" :transform="transform" :symbol="symbol" :title="title" :inverse="inverse" />
</template>

As for manually importing icons for treeshaking, yeah well, it is indeed annoying but I have managed to successfully write an auto build script that would walk through all of my vue files, extract the icon names from them and autogenerate a fontawesome-autogen.js file which is basically importable.

The script is about 115 lines, I will have it published in my repo once I’m done with it.