VUE/NUXT switch FAR vs FAS based on active link

[RMFogarty]

I would like to be able to toggle FAR vs FAS icon styles based on NUXT's active link css. This is very easy to do with CSS using the "nav-link active" class however using the below syntax does not allow switching icon type based on CSS:

<b-nav-item to="/dashboard"><fa-icon :icon="['far', 'home']" class="fa-fw nav-icon mr-2"/> Home</b-nav-item>
<b-nav-item to="/calendar"><fa-icon :icon="['far', 'calendar-alt']" class="fa-fw nav-icon mr-2"/> Calendar</b-nav-item>
<b-nav-item to="/messages"><fa-icon :icon="['far', 'comments']" class="fa-fw nav-icon mr-2"/> Messages</b-nav-item>

Is there anyway to set icon type using CSS or a javascript method that would accomplish the same using the vue/nuxt active link?

[robmadole]

@RMFogarty since the <svg> path data is going to be completely different when you switch styles there is no way to do this with CSS. I'm not familiar enough with Nuxt.js to help but maybe someone else can help.

[jasonlundien]

Closing issue, let us know if you believe this should remain open.