question-mark
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.

Drop support for imported icon object

See original GitHub issue

The syntax:

import Controller from '@ember/controller'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

export default Controller.extend({
  faCoffee,
});
{{fa-icon faCoffee}}

Is pretty foreign in my ember experience and leads to confusion like #29. I think supporting {{fa-icon 'coffee'}} and

import Controller from '@ember/controller'

export default Controller.extend({
  iconName: 'coffee',
});
{{fa-icon iconName}}

is sufficient, easier to document, and less confusing.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
tcjrcommented, Mar 26, 2018

If not, what advantage is there to having the extra layer of redirection through the controller’s setup of iconName?

It does not need to be there in this case. I believe the main use case for this is being able to set the icon at runtime without putting that logic in the template. Something like this:

  mailIcon: computed('isUnread', () => {
    return this.get('isUnread') ? 'envelope' : 'envelope-open';
  }

and

  {{fa-icon mailIcon}}
0reactions
mlwilkersoncommented, Mar 26, 2018

Oh, perfect. That makes sense. Thanks for shedding some light on that, @tcjr.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use react-icons to install Font Awesome in a React app
With React-icons, you only need to run one command to use any icons you want from a certain library. You just need to...
Read more >
Cound not find icon react-fontawesome - Stack Overflow
Hello'; import fontawesome from '@fortawesome/fontawesome' import ... icon attribute is set to the imported object instead of the name.
Read more >
Material Symbols and Icons - Google Fonts
Introducing Material Symbols. Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of...
Read more >
How To Use Font Awesome 5 with React - DigitalOcean
The recommended way to use Font Awesome icons is to import them one by one so that your final bundle sizes are as...
Read more >
Markers | Maps JavaScript API - Google Developers
Markers and icons are objects of type Marker . ... To remove a marker from the map, call the setMap() method passing null...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found