I don't see why icon instead of strings?

[Onur_Baran]

I was inspired by the code here Forum page.

I don’t see why icon instead of strings?

<App>
    <Font ux:Global="Linearicons" File="Linearicons-Free.ttf" />

    <!-- Menu Icons -->
    <Text ux:Class="Logout" Value="&#xf08b;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="Basket" Value="&#xe82e;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="Sent"   Value="&#xe844;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>
    <Text ux:Class="User"   Value="&#xe82a;" Font="Linearicons" Margin="5,0,5,0" FontSize="39" Alignment="Center"/>

    <Panel>
      <JavaScript>
        var Observable = require('FuseJS/Observable');

        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "&#xe82e;" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "&#xe82a;" // User
        }, {
          "title": "Menu Item 03",
          "icon": "&#xe844;" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "&#xf08b;" // Logout
        }];

        function clone(obj) {
          return JSON.parse(JSON.stringify(obj));
        }

        function getMenuItems() {
          return clone(menuItems);
        }

        exports.menuItems = getMenuItems(); 
      </JavaScript>

      <Grid ux:Class="MenuGrid" Background="White" Columns="3,7" ColumnCount="3" Padding="20,30">
        <string ux:Property="MenuIcon" />
        <string ux:Property="MenuText" />

        <Text Font="Linearicons" FontSize="16" Value="{Property this.MenuIcon}" Alignment="CenterLeft" />
        <Text FontSize="16" Margin="15,0,0,0" Alignment="CenterLeft" TextAlignment="Right" TextWrapping="Wrap" Value="{Property this.MenuText}" />
      </Grid>

      <StackPanel>
        <Each Items="{menuItems}">
          <MenuGrid Margin="0,10,0,0" MenuText="{title}" MenuIcon="{icon}"  />
        </Each>
      </StackPanel>

    </Panel>
</App>

Preview Screen

[Kristian_Hasselknipp]

Hi!

You need to use the JavaScript unicode escape codes when using the characters in JavaScript:

So instead of

 var menuItems = [{
          "title": "Menu Item 01",
          "icon": "" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "" // User
        }, {
          "title": "Menu Item 03",
          "icon": "" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "" // Logout
        }];

try

        var menuItems = [{
          "title": "Menu Item 01",
          "icon": "\ue82e" // Basket
        }, {
          "title": "Menu Item 02",
          "icon": "\ue82a" // User
        }, {
          "title": "Menu Item 03",
          "icon": "\ue844" // Sent
        }, {
          "title": "Menu Item 04",
          "icon": "\ue86f" // Logout
        }];

[Onur_Baran]

Thank you.