Conditional Icons

How-to Discussions
1

Hello,

I am trying to generate icons based on properties within a JS object. I have a few normal JS objects in an array as you can see below.

var Observable = require("FuseJS/Observable");

var appModules = [
    {
        id: "tickets",
        name: "Tickets",
        font: 'fas',
        icon: '\uF7D9'
    },
    {
        id: "myaccount",
        name: "My Profile",
        font: 'fas',
        icon: '\uF406'
    },
    {
        id: "settings",
        name: "Settings",
        font: "fas",
        icon: '\uF013'
    }
];

function openModule(module) {
    router.push(module);
}

module.exports = {
    appModules: appModules,

    openModule: openModule
};

appModules is then placed in an Each where I want to use the “font” and “icon” properties to dynamically create an icon for that module. The following is my current UX Markup that contains the Each. This is a page that is loaded through a router. The icons are loaded within the “Icon Demo Stack Panel” <StackPanel>. I have placed comments above each <Text> element to explain what output I am getting.

<!-- Declare the Icon font (place in ./fonts folder) -->
<Font File="../assets/FontAwesome_v5.8.1/fa-brands-400.ttf" ux:Global="fab" />
<Font File="../assets/FontAwesome_v5.8.1/fa-regular-400.ttf" ux:Global="far" />
<Font File="../assets/FontAwesome_v5.8.1/fa-solid-900.ttf" ux:Global="fas" />

<WhileWindowSize LessThan="458,9999"> <!-- width 458 (150*3 + 4*2), Height : set maximum numbers as you can if you don't care about height-->
    <Change itemGrid.Columns="1*,1*" />
</WhileWindowSize>
<ScrollView>
    <Grid ux:Name="itemGrid" DefaultRow="auto" Columns="1*,1*,1*" Margin="4" Padding="4" CellSpacing="4" Width="100%">
        <Each Items="{ appModules }">
            <DockPanel MinWidth="150" BoxSizing="FillAspect" Aspect="1">
                <Panel Dock="Bottom" Color="#fafafa" Margin="1">
                    <Text Value="{ name }" Alignment="CenterLeft" Margin="8,0" />
                </Panel>
                <!-- Icon Demo Stack Panel -->
                <StackPanel>
                    <!-- Display "fas" -->
                    <Text Value="{ font }" />
                    <!-- Displays the unicode -->
                    <Text Value="{ icon }" />
                    <!-- Display an empty square -->
                    <Text Value="{ icon }" Font="{ font }" />
                    <!-- Displays the correct icon -->
                    <Text Value="{ icon }" Font="fas" />
                </StackPanel>

                <Rectangle Color="#fff" Layer="Background" />
            </DockPanel>
        </Each>
    </Grid>
</ScrollView>

For some reason when the Font attribute is loaded through an expression causes the icons not to load. I need to pass both the icon unicode as well as the font name, because some icons load from other fonts…as I am sure is obvious.

2

maybe this explanation will help you : define font from javascript
and read this docs to get even know about Resources

hope it helps

1 Like
3

Perfect! Thank you :smiley:

I had the right idea about using expressions to dynamically load unicode icons and their font family, but I didn’t know that the fonts needed to be loaded as a resource.

1 Like