Nativescript vue : dynamically setting image src.decode to display font icon

Question

I created a component which is supposed to display a font icon :

<template>
    <Image :src.decode="code" />
</template>

<script>
    const mapping = {wi_owm_200:"&#xf01e;",wi_owm_201:"&#xf01e;",wi_owm_202:"&#xf01e;"};
    
    export default {
        props: {
            icon: String,
        },
        data() {
            return {
                code: String,
            };
        },
        created() {
            this.code = 'font://' + mapping[this.icon];
        }
    };
</script>

In my main page I have this code calling my component :

<template>
    <page>
        <StackLayout>
            <myComponent icon="wi_owm_200" />
        </StackLayout>
    </page>
</template>

<script>
import myComponent from "./myComponent";

export default {
    components: {
        myComponent
    }
}
</script>

When I compile, instead of my pretty icon, I will get the code "&#xf01e"... Meanwhile, directly in my main page this will work out perfectly :

<Image src.decode="font://&#xe900;" />

Here is the playground, if you want to check it live

Any idea to make my component work ?

marc_s · Accepted Answer · 2021-01-31 20:02:42Z

3

For Button dynamically I use :text="code" (instead of text.decode="& #xf164;"), where

code = String.fromCharCode(0xf164);

Try it for Image!

edited Jan 31, 2021 at 20:02

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 12, 2021 at 23:25

Xurik

561 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nativescript vue : dynamically setting image src.decode to display font icon

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related