fortawesome / ember-fontawesome Goto Github PK
View Code? Open in Web Editor NEWFont Awesome Ember component using SVG with JS
Home Page: https://fontawesome.com
License: MIT License
Font Awesome Ember component using SVG with JS
Home Page: https://fontawesome.com
License: MIT License
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
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
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:
Any ideas what we're doing wrong?
Hi! Ember version is great but we need searchPseudoElements options for environment.js. Is this possible?
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"
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
.
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.
The syntax:
import Controller from '@ember/controller'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'
export default Controller.extend({
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',
});
is sufficient, easier to document, and less confusing.
I tried to use this, but errors are obvious.
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.
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?
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)
See FortAwesome/vue-fontawesome@3b1b483 for an example.
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.
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 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";
}
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 adevelopment
branch that we are working out of and we haven't mergedmaster
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.
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,
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:
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
When using an icon, you do this:
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?
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?
{{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'
}
},
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.
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.
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?
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:
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.
stack classes class="fa-stack-2x"
will get filtered in getClasses()
method. Adding a stack
argument is the nicest thing to fix this ๐
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.
=================================================================================
ENV Summary:
TIME: Wed Feb 20 2019 19:05:34 GMT-0300 (Chile Summer Time)
TITLE: ember
ARGV:
- /usr/bin/node
- /home/robbo/.yarn/bin/ember
- s
EXEC_PATH: /usr/bin/node
TMPDIR: /tmp
SHELL: /usr/bin/zsh
PATH: --
PLATFORM: linux x64
FREEMEM: 1870454784
TOTALMEM: 16686784512
UPTIME: 28430
LOADAVG: 3.205078125,2.79296875,3.1376953125
CPUS:
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3459
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3429
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3433
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3411
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3512
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3440
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3416
- Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz - 3413
ENDIANNESS: LE
VERSIONS:
- ares: 1.15.0
- cldr: 34.0
- http_parser: 2.9.0
- icu: 63.1
- modules: 64
- napi: 3
- nghttp2: 1.36.0
- node: 10.15.1
- openssl: 1.1.1a
- tz: 2018e
- unicode: 11.0
- uv: 1.26.0
- v8: 6.8.275.32-node.12
- zlib: 1.2.11
ERROR Summary:
- broccoliBuilderErrorStack: [undefined]
- code: ERR_INVALID_ARG_TYPE
- codeFrame: [undefined]
- errorMessage: The "path" argument must be of type string. Received type undefined
- errorType: [undefined]
- location:
- column: [undefined]
- file: [undefined]
- line: [undefined]
- message: The "path" argument must be of type string. Received type undefined
- name: TypeError [ERR_INVALID_ARG_TYPE]
- nodeAnnotation: [undefined]
- nodeName: [undefined]
- originalErrorMessage: [undefined]
- stack: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
at assertPath (path.js:39:11)
at Object.join (path.js:1152:7)
at addons.map.addon (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/lib/discover-configured-icons.js:18:27)
at Array.map (<anonymous>)
at processAddons (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/lib/discover-configured-icons.js:17:27)
at getIcons (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/lib/discover-configured-icons.js:28:20)
at discoverConfiguredIcons (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/lib/discover-configured-icons.js:11:17)
at Class.readConfig (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/index.js:119:29)
at Class.included (/home/robbo/projects/postedin/platform/app/node_modules/@fortawesome/ember-fontawesome/index.js:182:10)
at Class.superWrapper [as included] (/home/robbo/projects/postedin/platform/app/node_modules/core-object/lib/assign-properties.js:34:20)
=================================================================================
When switching from ember-font-awesome to ember-fontawesome I noticed the following payload changes for my app that uses about 30 icons.
Asset | FA 4 | FA 5 | Diff |
---|---|---|---|
vendor.js | 545 KB | 761 KB | +216 KB |
font | 67 KB | 0 KB | -67 KB |
app.css | 31 KB | 23.9 KB | -7.1 KB |
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?
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:
Line 84 in ca803d8
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.
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'
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.
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.
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",
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'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.
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 ๐
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.
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 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.
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
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.
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?
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.
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.