By Jan Lghr


2018-07-12 00:16:07 8 Comments

I own a FontAwesome Pro License and I use the Vue-FontAwesome Component.

When I try to import all icons from both the free and Pro repo I get an "Duplicate declaration error ..." and if I change the declaration name it can't be found anymore.

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fab)
library.add(fas)
library.add(far)
library.add(fal)

How do I import all icons from Free and Pro?

1 comments

@Coreus 2019-01-30 12:11:55

You're in effect importing multiple icon packs into to the same var for both far and fas, hence the error "Duplicate declaration".

As stated in comments, if you have FontAwesome Pro, that includes everything in FontAwesome Free. Import the pro-packages you need, and forget about the free edition.

That being said, importing the entire thing isn't ideal. If you're using a bundle manager with tree shaking (i.e webpack), it will save your application's weight impact tenfold. You rarely need all of the 5k icons.

Continuing down that road, that is; not importing the entire package: You can import different icon versions by importing and casting them. Like so:

import { library } from '@fortawesome/fontawesome-svg-core'

import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'

library.add(fasCoffee, farCoffee, falCoffee)

More on all of this in the official docs for FA-Pro.

Related Questions

Sponsored Content

5 Answered Questions

[SOLVED] Using FontAwesome with Sass

2 Answered Questions

[SOLVED] Import all icons from Fontawesome

1 Answered Questions

[SOLVED] fontawesome error "Could not find one or more icon"

1 Answered Questions

[SOLVED] Fontawesome 5 in Android, 3 files

3 Answered Questions

1 Answered Questions

1 Answered Questions

[SOLVED] how to avoid duplicate import and component declarations in VueJS

  • 2017-09-26 21:00:15
  • dcsan
  • 559 View
  • 1 Score
  • 1 Answer
  • Tags:   import vue.js

2 Answered Questions

Sponsored Content