using library in a component can be re-use in another component?

[duongtdvn]

So i currently use library to import icons in an individual component like this:

import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faPen,
  faPlus,
  faSearch
} from "@fortawesome/pro-regular-svg-icons";

library.add(faPen, faPlus, faSearch);

And while creating another component which does not related to the one above, i still can use the icons which has been imported previously without import them again. Is this right or i am doing it wrong?

[robmadole]

@duongtdvn you've got it right. The whole point of the library is so that you only have to do it once and then you can use it in every other place.

[duongtdvn]

Thank you @robmadole for your answer, but will it getting duplicated if i import the same icon in another component?

[robmadole]

@duongtdvn it won't get duplicated but you should only have one call to library.add(). I'm not 100% sure I understand what you are trying to do. So perhaps a more complete example is needed if you still have questions?

[kawazoe]

@robmadole I come from the same place as the OP here. I like to keep my components self contained and reusable. Having the library like this means that I cannot trust a component that uses FA to not have side effects across my application. Aka, what if I forget to add a specific icon that I use in component Foo because Bar already added it? Now if I try to reuse Foo elsewhere as is, it will break even though it used to work originally.

EDIT: I guess that in that case, we should be using this form instead and not use the library? https://github.com/FortAwesome/vue-fontawesome#alternative-using-component-property

[robmadole]

@kawazoe yep, exactly.

[silvio-e]

@robmadole

it won't get duplicated but you should only have one call to library.add()

I just tried to call it twice. First time in my nuxt plugin where I register the FontAwesomeIcon component and a second time in a component which receives data form a CMS with icons names. I would like to add icons in this component to the existing library.

The result is the added icons won't appear and I get following error:

Could not find one or more icon(s) {
  prefix: 'fas',
  iconName: 'hourglass'
} {}

➡️ But when logging the library I see that they actually got added. Do you have any insights why this is happening and an idea how that could work?

It would make it easier for us adding icons just in our CMS and with a fresh build it would do it automatically for the frontend too.