Font-awesome: Import regular and solid style for the same icon in node js

[toadkicker]

Describe the problem

I was getting 'duplicate declaration' error when importing two of the same icon names from 'regular' and 'solid'

What did you expect?

I expected to find some documentation about fixing the issue

What version and implementation are you using?

Version: any
Browser and version: nuxt/firefox 65/chrome

• [x] SVG with JS
• [ ] Web Fonts with CSS
• [ ] SVG Sprites
• [ ] On the Desktop

Reproducible test case

import {library, dom} from '@fortawesome/fontawesome-svg-core';
import {faStar} from '@fortawesome/fontawesome-pro-solid';
import {faStar} from '@fortawesome/fontawesome-pro-regular';
library.add({faStar})

This is how someone who works more than eight hours a day gets to this point. I didn't see it documented anywhere other than looking up import from MDN:

import {faStar as faStarReg} from '@fortawesome/fontawesome-pro-regular';

The as syntax is really useful here and I don't think its widely used/known in this particular part of the world. It could be helpful to add a note in the documentation about it so others learn how to gracefully use different styles of icons with the same name.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I think that this could be useful

@talbs is there a suggested approach to import the same icons from two different styles that we can add to the documentation?

[talbs]

@talbs is there a suggested approach to import the same icons from two different styles that we can add to the documentation?

Hmm, this might be above my faculties, but I think @robmadole would know the answer.

[robmadole]

Try this:

import {library, dom} from '@fortawesome/fontawesome-svg-core';
import {faStar as fasFaStar} from '@fortawesome/fontawesome-pro-solid';
import {faStar as farFaStar} from '@fortawesome/fontawesome-pro-regular';

library.add(fasFaStar, farFaStar);

[robmadole]

Oh! This is a documentation ticket! Sorry @toadkicker. I flew through the comments without reading the bug report.

Sure, we'll get this doc added.

[abierbaum]

@robmadole Is there anyway the packaging could be extended such that there are exported names from the packages that include the correct prefix?

For example make it so we can simply do:

import {FasStar} from '@fortawesome/fontawesome-pro-solid';
import {FarStar} from '@fortawesome/fontawesome-pro-regular';

That way when you are in an editor and want to pull in the regular star icon you know you can just import "FarStar". For backwards compatibility there would still need to be the un-prefixed names that overlap across packages, but this would help for those of us importing icons from multiple packages by making it clear what package they are coming from.

(other naming options could be something like: farFaStar)

[PunkHaz4rd]

Try this:

import {library, dom} from '@fortawesome/fontawesome-svg-core';
import {faStar as fasFaStar} from '@fortawesome/fontawesome-pro-solid';
import {faStar as farFaStar} from '@fortawesome/fontawesome-pro-regular';

library.add(fasFaStar, farFaStar);

When using as farCircle and then compiling, I get this:

Uncaught ReferenceError: farCircle is not defined

in library.add

[tagliala]

@PunkHaz4rd sorry, the above snippet of code is outdated.

The new implementation is properly documented at the bottom of this page: https://fontawesome.com/how-to-use/with-the-api/setup/importing-icons#icon-names

Here it is a working example of the above code (requires Font Awesome >= 5.1):

https://codesandbox.io/s/9oxv32nozy

Relevant javascript:

import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faStar as fasFaStar } from "@fortawesome/free-solid-svg-icons";
import { faStar as farFaStar } from "@fortawesome/free-regular-svg-icons";

library.add(fasFaStar, farFaStar);

dom.watch();

Since this behaviour has been documented, I'm going to close here.

PS: if you still have issues, please open a new issue and fill out our bug report template. Please also provide as many information as you can, including version of npm packages used