search

epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).
https://vuestic.dev
MIT License
3.52k stars 340 forks source link

VaIcon's are getting translated #4417

Closed Gkcrafting closed 6 days ago

Gkcrafting commented 2 weeks ago

Vuestic-ui version: 1.10.3

Description

Basically, I have a Vuestic app and it works just as usual. But when translating the website (with extensions or browsers built-in translating features), the icons are getting translated too. E.g: 🏠 when translating to French gives maison instead of displaying the icon.

I did some research and found out that there's a workaround for that, and that's simply by setting the translate attribute to no to the DOM, but the problem with that solution is my app cannot get translated anymore.

What I want is the usual text being translated, but the icons getting displayed as usual, how to do that?

Reproduction

asvae commented 2 weeks ago

Interesting, I just tried to run google translation on docs, and it doesn't work at all :(.

https://ui-vuestic-dev.translate.goog/getting-started/installation/?_x_tr_sl=en&_x_tr_tl=ru&_x_tr_hl=en&_x_tr_pto=wapp

m0ksem commented 2 weeks ago

Interesting, I just tried to run google translation on docs, and it doesn't work at all :(.

ui-vuestic-dev.translate.goog/getting-started/installation?_x_tr_sl=en&_x_tr_tl=ru&_x_tr_hl=en&_x_tr_pto=wapp

Thats because Google Translate do not mount vue application, and we show visually nothing until application is hydrated.

m0ksem commented 2 weeks ago

We need to add translate="no" to VaIcon.