Importing individual icons

[Edward Hibbert]

Thanks for the great package.

I'm using Nuxt. I had success reducing my bundle size by importing the icons I use within a plugin. But this means that all icons are loading on my landing page, even though they're not used, and this affects the payload size and load time.

As an experiment, I tried importing the icons directly within a component, e.g.:

import 'vue-awesome/icons/caret-down'
import 'vue-awesome/icons/caret-up'
import 'vue-awesome/icons/handshake'
import 'vue-awesome/icons/share-alt'

This seems to work most of the time, but I have an intermittent problem with it. Changing to do this for some icons will cause this:

Then later on, I will find that icons which previously seemed to work ok fail in the same way. This feels a bit like an issue with the way my bundles are getting created - perhaps some code is getting inlined wrongly?

Is it valid to try to import individual icons like this? Is there something I should be doing differently?

Thanks for any help, and Merry Christmas!

[Edward Hibbert]

I think this is another symptom of the import problem mentioned in the docs, and is solved by the suggested transpile:

module.exports = {
  // ...
  build: {
    transpile: [/^vue-awesome/]
  }
}