Attribute collision when one is bound and the other is not (using : shortand and not v-bind)

I upgraded my dependencies and I have some issues with the latest version (1.4.6). By testing the older releases, it appears that the bug got introduced on version 1.3.0 (1.2.18 works fine).

My code:

      <img
        svg-inline
        src="../../assets/icon.svg"
        class="fill-current menu-icon"
        :class="{ 'text-red-900': !active }"
      />

Expected output: <svg> tag with at least the static classes (fill-current menu-icon)

Instead I get: the static part is removed, only the :class part is respected ( )

Interestingly, if I make a trivial modification to the class (add a whitespace for instance), the hot-reload injects the updated static classes and everything looks fine again.

---

Furthermore, if I replace :class with v-bind:class

• on v1.3.0, everything seems to be fine
• on v1.4.6 the compilation fails with duplicate attribute: v-bind:class

Probably relevant commit: https://github.com/oliverfindl/vue-svg-inline-loader/commit/f5f0a0ff1b44f5de9381f70c991089892901ef99 (#28)

[oliverfindl]

Hello,

I updated loader and published it to npm. Current version is 1.5.0.

You can turn off transformation to v-bind: syntax with transformImageAttributesToVueDirectives option.

Please give me feedback if it works as expected.

Thanks

[oliverpool]

I will try to think about the best solution for this issue, but I’m not sure about outcome. As workaround you can use your :class on parent element and style it as a child of this parent. I know, it’s not convenient, but it should do the trick.

An easier workaround (without change to my CSS) is to manually merge my static class inside my bounded :class:

:class="{ 'text-red-900': !active, 'fill-current menu-icon': true }"