fortawesome / ember-fontawesome Goto Github PK

According to the npm page, there have been 3 releases of this package. However, the Github page shows none.

Can you publish release tags for this addon each time you publish a release on npm (as is standard practice)? Thanks 🙏

steps to reproduce (tested with latest chrome and firefox on mac):

• update package.json:
  "ember-source": "3.1.0-beta.5",

• run dummy app:
  ember serve

• observe huge icons at localhost:4200. The svg element seems to have about the correct size, however the path itself is totally out of context.

Will check if this persists with the ember 3.1.0 release when it is out and update this issue accordingly. Canary currently shows similar behaviour as beta.

I tried to use this, but errors are obvious.

This seems to inject some styles in a <style> tag at browser render time that isn't available during FastBoot render so the icon sizes change once the browser takes over. Will there be support for FastBoot?

Our SVG icons don't seem to be scaling at all. They are always rendered per the viewbox attr (512px x 512px) no matter what I do with the font-size of the parent element, or the styles I add to the icon (fixed width, size etc.).

See image below - grey box is the div the SVG is located inside which has font-size: 1em set.

Our ember-cli-build includes this config:

let app = new EmberApp(defaults, {
  fontawesome: {
      icons: {
        'pro-solid-svg-icons': [
          'envelope',
          'key'
         ]
      }
    }
}

We are using bootstrap 4.1 (via the ember-bootstrap addon), and as this is a new app, we've got none of our css.

Our template which renders the screenshot above looks like this:

<div style="font-size: 1em; background-color:#eee;">
  {{fa-icon 'envelope'}}
</div>

Any ideas what we're doing wrong?

passing an fa icon to the fa-icon helper seems to have been deprecated

DEPRECATION: Passing an icon object is no longer supported, use the icon name as a string instead ({{fa-icon 'plus-circle'}}).  [deprecation id: ember-fontawesome-no-object]

Please bring back this functionality, as removing it makes it unnecessarily difficult to pass an icon to a nested component, as it is no longer possible to correctly reference a single icon without passing multiple parameters. For instance one could previously do:

{{my-input-component fa=faCircle value=...}}

One could import the correct icon in a controller or component and simply pass it to the component, where we could simple use it:

my-input-component.hbs:

<label>{{fa-icon fa}}</label>
<input></input>

now we need to pass every single information to the component in order to identify an icon correctly. for instance:

{{my-input-component fa-icon="fa-circle" fa-icon="fas"  value=...}}

Please bring back a way to specify an icon by using a single parameter. The deprecation, even though it might help internally, only complicates things for the people using it.

I was trying to use this addon in my addon with the new feature of specifying icons required by the addon.
When I launch the dummy app I see that fontawesome styles (.svg-inline--fa and others) are inserted directly to the html within the style tag and also included in the vendor.css.

Is it possible to automatically subset icons based on usage in the code? I run into the problem where I sometimes forget to include an icon in my icon subset and the server builds without complaint. So a production bug occurs where the icon is missing. This could be solved by either showing a warning or error when a missing icon is used or somehow dynamically generating the icon subset.

When trying to use this from an application in a yarn workspace I get the following error:

ENOENT: no such file or directory, lstat 'c:\project-root\packages\app-in-workspace\node_modules\@fortawesome\fontawesome-svg-core'

Is there a list of icons that are yet to be available in ember-fontawesome
https://fontawesome.com/icons/users-cog?style=solid (This icon is not yet supported)

Tried the below two methods but no luck.
{{fa-icon "users-cog" prefix='fas' size='2' color='white' }}
{{fa-icon "fas fa-users-cog" size='2' color='white'}}
Or are the above icons not supported yet.
fontawesome: { icons: { 'free-brands-svg-icons': 'all', 'free-regular-svg-icons': 'all', 'free-solid-svg-icons': 'all' } }
I have the above config for ember-cli-build.js

From this discussion in #13 we need to find a way to disallow developers from overriding _frameworkStyle in the fa-icon component as the value is assumed to be safe for inclusion in the style attribute. Currently checking in this.attrs and that may not be a good long term solution.

{{fa-icon "igloo"}}

works but;

<i class="fas fa-igloo"></i>

does not.

Do I need to do something special?

environment.js contains;

fontawesome: {
      warnIfNoIconsIncluded: true,
      defaultPrefix: 'fas',
      icons: {
        'free-solid-svg-icons': 'all'
      }
    },

I created a new app, installed ember-fontawesome and added an icon to the template:

{{fa-icon "square"}}

Here is what I've got in the class attribute of the svg tag: class="svg-inline--fa fa-square fa-w-14 undefined ember-view". Note that undefined is not supposed to be here.

Once I add a custom class it got inserted 3 times:

{{fa-icon "square" class="my-custom-class"}}

class="my-custom-class svg-inline--fa fa-square fa-w-14 my-custom-class my-custom-class ember-view"

https://fontawesome.com/how-to-use/upgrading-from-4#v4-shim

Our application allows us to render .hbs content snippets from externally trusted sources. We would like the ability to allow these external users to slowly "opt-in" over time to Font Awesome v5.x, as almost all are currently using the <i "fa"> syntax and in our current Font Awesome v4.x environment using ember-font-awesome, these get properly converted and rendered correctly and everything "just works".

If we could now include the v4-shim on our end after upgrading to v5.x, then everything should just continue to work as expected until users do a proper upgrade.

Let me know if there are any considerations that need to be made there which I haven't yet thought of. Thanks

I was able to use FA4 to create an upload progress indicator by using two overlays. One that is the background and a second colored one that is the growing progress. In the end it looked like that:

After switching to this addon I can no longer directly provide css style information to the element (the height of the colored element that should be visible). Power transform does not seem to offer a way to only display a fraction of an icon, does it? Is there a way to use this addon to display an icon which changes the amount it is colored in correspondence to a provided value?

I have followed the instructions to install this addon, however quickly notificed that {{fa-icon 'coffee'}} only leads to a console message: ember-console.js:24 Could not find icon undefined.
After checking the source I found that the only way that currently seems to work is to explicitly provide the icon parameter to the component like {{fa-icon icon='coffee'}}. So either the docs or the addon currently seem to not work as intended.

I'm trying to migrate to this from simply dropping in the fontawesome-all.js script and everything is working fine except for one difference: the fa-icon components seem to have <span> tag wrapping the <svg> tag whereas in the previous version, svg was the top level element.

Also it looks like you're using some svg-related attributeBindings for the span element.

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.

stack classes class="fa-stack-2x" will get filtered in getClasses() method. Adding a stack argument is the nicest thing to fix this 😄

I've followed the installation instructions and installed @fortawesome/ember-fontawesome and @fortawesome/free-solid-svg-icons however I can't seem to get any icons to work.

I am using the icons by doing {{fa-icon 'coffee'}} and receive the following error Could not find icon: iconName=coffee, prefix=fas.

I am probably doing something dumb but I can't figure out what it is.

It looks to me like published icon packages have been reduced from

@fortawesome/free-brands-svg-icons
@fortawesome/free-solid-svg-icons
@fortawesome/free-regular-svg-icons
@fortawesome/pro-solid-svg-icons 
@fortawesome/pro-regular-svg-icons 
@fortawesome/pro-light-svg-icons 

to just

@fortawesome/free-icons
@fortawesome/pro-icons 

Is that correct? If so we should update the README and the imports for static build time icons at https://github.com/FortAwesome/ember-fontawesome/blob/master/lib/fontawesome-helpers.js#L19.

Following up on this comment from @robmadole:

Regarding the missing icons: our 5.1.0 release hasn't been caught up with the latest icons yet. We have a development branch that we are working out of and we haven't merged master in for a bit as we work through the big refactor. This will happen soon.

So the newest icons are not available, including the logistics and medical categories.

Opening this issue to track it in case others run into it.

After installing this addon, when I save any SCSS file in my repo (even with no changes), the entire app reloads. So CSS live reload is no longer working.

I created a repro here: https://github.com/bgentry/ember-css-hot-reload-demo

You can clone that, run ember server, and see that whenever you save app.scss, the entire page reloads. Get rid of the addon, and livereload works again.

Most of our options are specified in the ember-cli-build.js file, however defaultPrefix is setup to be defined in the environment.js file. Would anyone have an objection to me moving that configuration option into the build file and deprecating the other location?
Reasons:

1. Consistency
2. We need defaultPrefix at build time to do the static transform.

I created an addon (ember addon <my-addon>), turned that addon into an engine (ember install ember-engines). Installed ember-fa (ember install @fortawesome/ember-fontawesome), installed the pro icon packs with yarn (yarn add @fortawesome/fontawesome-pro-*@5.1.0-3). Which put @fortawesome/ember-fontawesome in devDependencies and the icon packs in dependencies. I did reexported the {{fa-icon}}, like so:

// addon/components/fa-icon.js
export { default } from '@fortawesome/ember-fontawesome/addon/components/fa-icon';

and used it in the application template. I did ran the dummy test app: ember s which resulted in this error:

Could not find module `@fortawesome/ember-fontawesome/addon/components/fa-icon`

So I moved @fortawesome/ember-fontawesome from devDependencies to dependencies and run ember s again, which gives me this one:

$ ember s
Cannot read property 'options' of undefined


Stack Trace and Error Report: /var/folders/tv/67gb0k1s7yz4f0cgn8kvqbj00000gn/T/error.dump.912a76e8916c766d1934d39886abfbab.log

The log has the following trace:

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - codeFrame: [undefined]
  - errorMessage: Cannot read property 'options' of undefined
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: Cannot read property 'options' of undefined
  - name: TypeError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: TypeError: Cannot read property 'options' of undefined
    at Class.buildConfig (/path/to/my-engine/node_modules/@fortawesome/ember-fontawesome/index.js:84:40)
    at Class.included (/path/to/my-engine/node_modules/@fortawesome/ember-fontawesome/index.js:126:35)
    at Class.superWrapper [as included] (/path/to/my-engine/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:34:20)
    at addons.reduce (/path/to/my-engine/node_modules/ember-cli/lib/models/addon.js:381:26)
    at Array.reduce (<anonymous>)
    at Class.eachAddonInvoke (/path/to/my-engine/node_modules/ember-cli/lib/models/addon.js:378:24)
    at Class.included (/path/to/my-engine/node_modules/ember-cli/lib/models/addon.js:648:10)
    at Class.superWrapper [as included] (/path/to/my-engine/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:34:20)
    at Class.included (/path/to/my-engine/node_modules/ember-engines/lib/engine-addon.js:605:28)
    at project.addons.project.addons.filter.addon (/path/to/my-engine/node_modules/ember-cli/lib/broccoli/ember-app.js:542:17)

I traced it down to this line:

There is no this.app, this is undefined when the dummy app of an addon is ran. I "fixed" this locally for me with:

if (!this.app) { this.app = {}; }
if (!this.app.options) { this.app.options = {}; }

so badly 😁 I'm pretty sure, there is a stable API to that ;) Should be easy to fix, actually.

Opening a new issue here to carry forward design discussion about the AST transform functionality that @jrjohnson is porting from ember-font-awesome and mentioned in #8.

So, @jrjohnson how might these build time AST transforms impact animated icon use cases, or any case where the <svg> DOM tree changes in response to something happening in the app?

For example, with the "magic slider" example currently in the dummy app, the DOM tree under the <svg> changes structurally when you move that slider. So that seems like a case that couldn't be rendered statically at build time. Admittedly, most icons are probably static and could be rendered statically without any functional impact.

Trying to render a simple {{fa-icon "coffee"}} on IE11 gives an error:

Object doesn't support property or method 'assign'

The problem is the following line in the didReceiveAttrs function of addon/components/fa-icon.js:

const o = Object.assign({},
      classes,
      transform,
      mask,
      {symbol: symbol}
    )

IE11 doesn't support Object.assign.

Adding IE11 to my targets.js file also doesn't help here.

From what I can tell, FA5 supports IE11.

Ember also officially supports IE11 unless I'm mistaken.

I couldn't see any comments about limited browser support for this add-on. Is this hence a bug or is IE11 not supported by this add-on?

I upgraded from 0.0.11-1 to 0.0.12 and I've started seeing this error on a particular route of my app.

The full stack trace:

runtime.js:6407 Uncaught TypeError: Cannot read property 'commit' of null
    at Environment.commit (runtime.js:6407)
    at Environment.commit (environment.js:266)
    at InteractiveRenderer._renderRootsTransaction (renderer.js:359)
    at InteractiveRenderer._renderRoot (renderer.js:289)
    at InteractiveRenderer._appendDefinition (renderer.js:214)
    at InteractiveRenderer.appendOutletView (renderer.js:202)
    at invokeWithOnError (backburner.js:216)
    at Queue.flush (backburner.js:125)
    at DeferredActionQueues.flush (backburner.js:278)
    at Backburner.end (backburner.js:410)

Diff of dependencies:

-    "@fortawesome/ember-fontawesome": "0.0.11-1",
+    "@fortawesome/ember-fontawesome": "0.0.12",
     "@fortawesome/fontawesome-free-brands": "^5.1.0-3",
-    "@fortawesome/fontawesome-free-regular": "^5.1.0-3",
-    "@fortawesome/fontawesome-free-solid": "^5.1.0-3",
+    "@fortawesome/fontawesome-pro-light": "^5.0.8",
+    "@fortawesome/fontawesome-pro-regular": "^5.0.8",
+    "@fortawesome/fontawesome-pro-solid": "^5.0.8",

You can see I also upgraded to pro icons. Not sure if that has anything to do with it. It's not out of the question that this error is unrelated to this library. But I thought it's likely since it's the only dependency that changed.

There are some issues with specifying (or not specifying) a class attribute on an {{fa-icon}} component. (This usage is demonstrated in the README, and is presumably supported, since it kinda works).

For example:

{{fa-icon "map"}}
{{fa-icon "map" class=""}}
{{fa-icon "map" class="grey"}}

results in

<svg ... class="svg-inline--fa fa-map fa-w-18  undefined ember-view"></svg>
<svg ... class="svg-inline--fa fa-map fa-w-18   ember-view"></svg>
<svg ... class="grey svg-inline--fa fa-map fa-w-18 grey grey ember-view"></svg>

This is with default setup in version 0.1.9

If you want to use a set other than free solid, you have to add the prefix to every icon use. An addon configuration option to change the default prefix would make using the other icons sets (or changing between them) much easier.

I'm looking at broccoli-concat-analyser, and see:

it's in tiny text on the right. what's the js for? can I remove it somehow?

Bound values for spin and pulse do not appear to work correctly. Once the spin is turned on, it can never be turned off.

I created a simple use case in the test application:

{{fa-icon 'sync' spin=isSpinning}} {{input type="checkbox" checked=isSpinning}} Spin it

When you set isSpinning to true, the icon correctly begins to spin. But toggling it to false, does not stop the spinning. That is, the fa-spin class is never removed.

tcjr@67aea5c

ember-cli: 3.1.0-beta.1
node: 9.8.0
os: darwin x64

Just tried migrating from the old ember-font-awesome to this new add-on, but I get an error with ember s.

Here's the log:

  - nodeName: Rollup
  - originalErrorMessage: EEXIST: file already exists, mkdir '/Users/Lou/Sites/prog/tmp/fontawesome-cache_path-1avxyzXv.tmp/node_modules/'
  - stack: Error: EEXIST: file already exists, mkdir '/Users/Lou/Sites/prog/tmp/fontawesome-cache_path-1avxyzXv.tmp/node_modules/'
    at Object.fs.mkdirSync (fs.js:909:18)
    at patches.forEach (/Users/Lou/Sites/prog/node_modules/broccoli-rollup/dist/index.js:68:26)
    at Array.forEach (<anonymous>)
    at Rollup.build (/Users/Lou/Sites/prog/node_modules/broccoli-rollup/dist/index.js:63:17)
    at /Users/Lou/Sites/prog/node_modules/broccoli-plugin/read_compat.js:93:34
    at tryCatch (/Users/Lou/Sites/prog/node_modules/rsvp/dist/rsvp.js:525:12)
    at invokeCallback (/Users/Lou/Sites/prog/node_modules/rsvp/dist/rsvp.js:538:13)
    at publish (/Users/Lou/Sites/prog/node_modules/rsvp/dist/rsvp.js:508:7)
    at flush (/Users/Lou/Sites/prog/node_modules/rsvp/dist/rsvp.js:2415:5)
    at process._tickCallback (internal/process/next_tick.js:112:11)

=================================================================================

package.json contains:

"@fortawesome/fontawesome-free-solid": "5.1.0-3",
"@fortawesome/ember-fontawesome": "^0.0.12",

in Line 21 of index.js, this.fontawesomeConfig is null. This causes the build to fail.

This happens when ember-fontawesome is used within an addon and that is wrapped in another addon:

app -> addon1 -> addon2 -> ember-fontawesome

Building addon2 succeeds.
Building addon1 fails.

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - codeFrame: [undefined]
  - errorMessage: Cannot read property 'icons' of null
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: Cannot read property 'icons' of null
  - name: TypeError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: TypeError: Cannot read property 'icons' of null
    at Class.treeForVendor (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/@fortawesome/ember-fontawesome/index.js:21:39)
    at Class._treeFor (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:617:33)
    at Class.treeFor (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:577:21)
    at addons.reduce (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:450:26)
    at Array.reduce (native)
    at Class.eachAddonInvoke (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:447:24)
    at Class.treeFor (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:576:22)
    at addons.reduce (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:450:26)
    at Array.reduce (native)
    at Class.eachAddonInvoke (/root/src/bitbucket.org/silvercurve/pixelpipe-ember-playback-core/node_modules/ember-cli/lib/models/addon.js:447:24)

I'm trying to understand how to get the automatic replacement to work. Could the upgrade guide be complemented with an example perhaps or some more detailed instructions?

Hi! Ember version is great but we need searchPseudoElements options for environment.js. Is this possible?

See FortAwesome/vue-fontawesome@3b1b483 for an example.

After I installed @fortawesome/ember-fontawesome, I started getting some warning messages when running ember s.

# ember s
WARNING:
WARNING: /myapp/node_modules/simple-html-tokenizer/commands:
WARNING:    Missing package directory

These warnings were fixed in tildeio/simple-html-tokenizer#61.

However it seems that ember-fontawesome still uses old version of simple-html-tokenizer.

# npm ls simple-html-tokenizer
[email protected] /myapp
+-- @fortawesome/[email protected]
| `-- [email protected]
|   +-- @glimmer/[email protected]
|   | `-- [email protected]
|   `-- @glimmer/[email protected]
|     `-- [email protected]  deduped
`-- [email protected]
  `-- [email protected]
    `-- @glimmer/[email protected]
      `-- @glimmer/[email protected]
        `-- [email protected]

Is there anything we could do in order to avoid those warnings?

I'm not able to use the check icon from the Pro package. I'm trying it like this:

{{fa-icon icon='check' prefix='fal'}}

In ember-cli-build:

fontawesome: {
  icons: {
    'fontawesome-pro-light': [
      'faCheck',
    ],
  }
}

My package versions:

"@fortawesome/ember-fontawesome": "0.0.12",
"@fortawesome/fontawesome-free-brands": "^5.1.0-3",
"@fortawesome/fontawesome-pro-light": "^5.1.0-3",
"@fortawesome/fontawesome-pro-regular": "^5.1.0-3",
"@fortawesome/fontawesome-pro-solid": "^5.1.0-3",

The result is an empty svg tag.

Similar icons from fontawesome-pro-light do work like thumbs-up.

Hi,

I followed all install steps for the pro version but I am getting:

runtime.js:4346 Uncaught Error: Compile Error: fa-icon is not a helper
    at VM412 vendor.js:30938

Anyone had this issue as well?

Thanks,

I believe this is because the svg has no viewbox? The other icons have a viewbox="0 0 512 512". Ideally a missing icon wouldn't disrupt the flow of the page like this.

Edit: actually it's the .svg-inline--fa class where a 1em height comes from. So maybe a missing SVG should have some kind of default classes?

We currently log a message in the console if an icon is used that doesn't exist in the library. We should have the same kind of warning when an icon is used as a mask as well.

I'm getting the following warning when having enableExperimentalBuildTimeTransform enabled.

WARNING: @fortawesome/ember-fontawesome: Unable to load icon 'search' with prefix 'fas'.

I have my defaultPrefix set to fal, it works fine at runtime, but it complains in build time.

Note, I do have the search icon in my build.

I've been experimenting around lately with a nice API to add decorators (which uses mask(s) under the hood). I was at least able to add one (more is I guess easily possible, but my limited SVG knowledge stopped me there). Coming up with this API:

<FaIcon @icon='user' as |icon|>
  <icon.decorator @icon='plus' @position='br' />
</FaIcon>

I put this together in a gist: https://gist.github.com/gossi/9d4090dba409c047c267cfba877f7065
Multiple masks would I guess be a nice addition to FA-Core and and a new playground for those using the JS api. I hope you can push this idea upstream.

I have been using font-awesome in my Ember app like so.

.times-tag{
color: '#FF0000'
}
<i class="fa fa-times times-tag" onClick={{action 'deleteTag' item.id}} aria-hidden="true"></i>
How can we do the same with ember-fontawesome?

I tried
{{fa-icon 'fa-times' 'times-tag'}

Neither the 'times-tag' styling class is applied nor 'aria-hidden' attribute is attached.And there seems to be no reference in the documentation on how to add actions/events.

When switching from ember-font-awesome to ember-fontawesome I noticed the following payload changes for my app that uses about 30 icons.

So overall, an increase of 141.9 KB from the switch.

I have not added anything to my ember-cli-build.js, and I'm using both the fontawesome-free-brands and fontawesome-free-solid packages on v5.1.0-3. These were installed with yarn add [pkgname] per the readme (not dev dependencies).

From this comment I was under the impression that this addon implemented tree shaking to get rid of unused icons. Is that not the case? Is there something else I need to do to get the build size back down?

When using an icon, you do this:

{{fa-icon "ambulance"}}

However, when specifying an icon to include in ember-cli-build.js, you do this:

[ "faAmbulance" ]

Do these need to be different? Can the build file just use ambulance and do the casing conversion on its own?

Fa icons have a default fill property which is not shown anywhere in documentation. Kindly address a way that explains how to change fa icon colors

I tried following the instructions at https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements, but I am not able to get css pseudo elements working so far when using FA5 Pro. The element renders an empty box:

Is there a configuration to enable this?

    &::before {
      font-family: 'Font Awesome 5 Pro';
      font-weight: 300;
      content: "\f078";
    }