Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to import the same icon from solid and regular library ?

See original GitHub issue

Describe the problem

I want to import “faStar” from the regular AND solid library. There is no example in the documentation to do this.

If i try to do :

import { faStar } from '@fortawesome/free-regular-svg-icons';
import { faStar } from '@fortawesome/free-solid-svg-icons';

I got an error because it’s duplicate.

I end up using this solution but i don’t know if it’s the rigth way…

import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';
...
library.add(fasStar);
library.add(farStar);
...
<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>

What did you expect?

A tip to import an icon from both free library without importing all “far” and “fas” like this :

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

library.add(fas, far);

Issue Analytics

State:
Created 5 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

10reactions

MaklaCofcommented, Jan 7, 2019

Hi, I tested and final bundle is the same:

import {faHome as fasHome} from "@fortawesome/pro-solid-svg-icons";
import { faHome as falHome} from "@fortawesome/pro-light-svg-icons";
import { faHome as farHome} from "@fortawesome/pro-regular-svg-icons";
library.add(fasHome, falHome, farHome);

import * as fas from "@fortawesome/pro-solid-svg-icons";
import * as fal from "@fortawesome/pro-light-svg-icons";
import * as far from "@fortawesome/pro-regular-svg-icons";
library.add(fas.faHome, fal.faHome, far.faHome);

6reactions

WizardPCcommented, Dec 31, 2018

I just see that aliases are used in the stackblitz example… It’s just a missing doc issue so 👍

I haven’t the time now cause of Christmas but here is my example :

Adding an icon from both Regular and Solid style:

import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import { faStar as fasStar } from '@fortawesome/free-solid-svg-icons';

library.add(fasStar);
library.add(farStar);

<fa-icon [icon]="['fas', 'star']"></fa-icon>
<fa-icon [icon]="['far', 'star']"></fa-icon>

Top Results From Across the Web

How to use same icon regular and solid type - Stack Overflow

Try this: import { faBell } from '@fortawesome/free-solid-svg-icons/faBell'; import { faBell as anotherFaBell } from ...

Import Icons | Font Awesome Docs

Here's a primer on Font Awesome icon naming and how to import from icon content ... Sharp, and Brands) as well as 5...

Using other styles | angular-fontawesome - GitHub Pages

Import the icon from the installed package and use it in your application using either icon library or explicit references approach.

vue-fontawesome - JavaScript

Import the specific icons that you need; Import the same icon from different ... on how to display Solid, Regular, and Brand icons...

Font Awesome icons in Vue.js apps: A complete guide

import { library } from '@fortawesome/fontawesome-svg-core'; import { faPhone } from "@fortawesome/free-solid-svg-icons"; import { faJs, faVuejs } ...