search

vaso2 / nuxt-fontawesome

Nuxt module for Fontawesome 5 integration with ES6 imports and tree shaking
MIT License
107 stars 4 forks source link

Colour duotone icons using scss variables coupled with --fa-primary-color and --fa-secondary-color properties #15

Open anaisaurus opened 4 years ago

anaisaurus commented 4 years ago

Hello,

I am trying to colour duotone icons in my scss file when I use variables as values of --fa-primary-color and --fa-secondary-color properties. Nonetheless, it works like a charm when I am using the color property (but the result is not the same).

<font-awesome-icon icon="['fad', 'thunderstorm-sun']" />
...
<style>.fa-thunderstorm-sun {
    --fa-primary-color: #deb11a; /* works */
    --fa-secondary-color: $primary; /* doesn't work */
    color: $primary; /* works */
}</style>

I may be missing something. Feel free to correct me if I'm doing anything wrong.

bvgastel commented 3 years ago

Correct syntax is apparently --fa-primary-color: #{$primary}; (just had the same problem, this was the fix after trial and error).

gkafkias commented 3 years ago

@bvgastel You sir, just saved my life!! Been looking for a solution for 3 hours now, googled everything and finally found your god-sent reply!! Thanks!! 😄