search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.6k stars 12.2k forks source link

Duotone Icons in SVG + JS Framework #15715

Open harrisonfm opened 4 years ago

harrisonfm commented 4 years ago

I'm working with duotone icons for the first time in a project with a pro license and having trouble getting the layer / color manipulation working.

I'm using the User Circle Icon in a SVG+JS implementation. On your site, I can clearly see the icon in a group tag with multiple paths.

However, while I can include the icon successfully in its default form, but when it's added to my page as an svg, it only has one path. Basic suggested manipulations like fa-swap-opacity fizzle as a result.

What could I be missing in my implementation that would cause duotone icons to be added successfully but as a single SVG instead of in a group?

Version and implementation I have FontAwesome SVG Core at 1.2.12 & Pro Duotone SVG Icons at 5.11.1.

tagliala commented 4 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide more information? Are you using an asset build system like webpack and npm individual packages?

Does this riproduce you issue? https://jsfiddle.net/tagliala/z5a0x7vs/2/

harrisonfm commented 4 years ago

Hi Tag, appreciate your response!

Yes, I'm using individual packages in npm.

When I use your jsfiddle, I see the icons working as intended! If I were to do that on my webpage, using the imported icons they would look the same.

What else can I get you to help answer this?

tagliala commented 4 years ago

Could you please provide a reproducible test case?

Please double check that you don't share your API secret token