Not require listing all icons on nuxt.config.js

[iBobik]

Hello, it is possible to not list all icons used on a whole site in nuxt.config.js, but benefit from tree shaking (load only icons used on the page)?

Ideally without strange technique using computed property.

[Fabioni]

I think you can always use locally imported icons instead of gloable.

Use locally imported icons

<template>
    <div>
        <fa-layers full-width class="fa-4x">
          <fa :icon="fas.faCircle"/>
          <fa-layers-text transform="shrink-12" value="GALSD" class="fa-inverse" />
        </fa-layers>

        <fa :icon="fas.faAddressBook"  />
        <fa :icon="faGithub" />
    </div>
</template>

<script>
import { fas } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

export default {
  computed: {
    fas () {
       return fas // NOT RECOMMENDED
    },
    faGithub () {
       return faGithub
    }
  },
}
</script>