fix: Explicitly bind transform, viewBox in Fa

[nWacky]

With nuxt 4 and vue 3.5, vue-fa causes vue warnings in console:

[Vue warn]: Failed setting prop "transform" on <path>: value translate(-224 -256) is invalid.
  TypeError: setting getter-only property "transform"

    patchDOMProp
    patchProp
    hydrateElement
    hydrateNode
    hydrateChildren
    ...
    initApp

  at <Fa icon=Object { prefix: "fas", iconName: "flag", icon: (5) […] }>
  at <App key=4 >
  at <NuxtRoot>



[Vue warn]: Failed setting prop "viewBox" on <svg>: value 0 0 448 512 is invalid.
  TypeError: setting getter-only property "viewBox"

Reproduction

Reproduction: https://stackblitz.com/edit/nuxt-starter-iqucmp2g?file=README.md

1. open devtools
2. go to the home page
3. the warnings will be shown in the console

The issue happens when vue is hydrating a server rendered html page.

Vue tries to add transform and viewBox properties to vnodes. These properties are read only, which causes the TypeError.

Explicitly binding transform and viewBox as attributes via .attr solves the issue

[Cweili]

Thank you for your contribution! This is a well-documented fix for the Vue hydration warnings when using vue-fa with Nuxt 4 and Vue 3.5. The approach of explicitly binding transform and viewBox as attributes via .attr is clean and correct — it properly addresses the root cause where Vue tries to set getter-only DOM properties.

The reproduction link you provided was very helpful in understanding the issue. Appreciate the thorough debugging and the minimal, focused patch.

LGTM! 🚀

[Cweili]

Just published v4.1.0 with this fix included. Thanks again for your contribution! 🙌