Plan for new Segoe Fluent Icons

[robloo]

The Segoe Fluent Icons seem to be replacing Segoe MDL2 Assets icons starting with Windows 11.

Downloading these new Fluent icons here. Gives a EULA along with the Segoe Fluent Icons.ttf which unfortunately prevents it being used cross-platform. I have yet to find if these are open source some place.

However, Fluent UI System Icons (very similar) are developed out in the open on GitHub and are MIT licensed. There is a massive directory of SVG and PDF files available and the .ttf fonts are available under MIT license https://github.com/microsoft/fluentui-system-icons/tree/master/fonts. This means there is nothing preventing using these icons cross-platform. That makes sense and is great for React Native, Android, Maui or even Uno Platform usage.

What is the plan for incorporating these into Uno? Is there a plan to switch Uno itself over to using them?

It seems; however, that we are going to have to build our own font again as the Unicode points are different. I know the Uno Platform team has some tooling to do this left over from the Segoe MDL2 Assets font creation. Can that tooling be repurposed for Fluent UI System Icons?

https://github.com/microsoft/fluentui-system-icons/blob/master/icons.md

[jeromelaban]

We're maintaining a font file based on some of the icons from that repository.

It's certainly possible to make an updated font file to use those new glyphs, with the instructions we posted in uno.fonts repository.

[robloo]

A few comments:

1. I don't believe the automated tooling to build the Segoe MDL2 Assets for Uno was ever published. Without an automated tool this is never going to be maintainable.
2. It sounds like there isn't really a plan to create the new Segoe Fluent Icons font. I definitely think this needs to be addressed along with the new style updates in the coming months though. Use new Fluent Icons (Sun Valley refresh) #5734. Ideally Uno needs both fonts available.

In terms of automated tooling, there needs to be a mapping file that map Unicode points. Here is an excerpt from one going from Segoe MDL2 Assets Icons to Fluent UI System Icons. It may be nearly identical going from Fluent UI System Icons to Segoe Fluent Icons (I think Segoe Fluent Icons use the same Unicode point as Segoe MDL2 Assets).

            {"E72E", "Lock",                        "FC22", "ic_fluent_lock_closed_20_regular"},
            {"E738", "Remove",                      "FC72", "ic_fluent_subtract_20_regular"},
            {"E73E", "CheckMark",                   "F294", "ic_fluent_checkmark_20_regular"},
            {"E74D", "Delete",                      "F34C", "ic_fluent_delete_20_regular"},
            {"E751", "ReturnKey",                   "FBC6", "ic_fluent_arrow_enter_left_20_regular"},
            {"E76B", "ChevronLeft",                 "F2AA", "ic_fluent_chevron_left_20_regular"},
            {"E76C", "ChevronRight",                "F2B0", "ic_fluent_chevron_right_20_regular"},

This file would be highly maintainable and anyone can contribute new mappings. From this file an automated tool would build the font using both regular and filled Fluent UI System font variants and likely standardizing on the size 20 version. However, the tool could be configured to actually build using any size icon variant.

Full Fluent UI System Icon Unicode point mapping files are published here:
https://github.com/microsoft/fluentui-system-icons/blob/master/fonts/FluentSystemIcons-Regular.json
https://github.com/microsoft/fluentui-system-icons/blob/master/fonts/FluentSystemIcons-Filled.json

Reading the metadata of Microsoft's fonts, it seems they are built using svg2ttf from Fontello project which as luck would have it is fully open source.

All the pieces are there except one maintainable mapping file. Is there any plan for Uno Platform to go a direction similar to what is described here?

[jeromelaban]

Thanks for the research! We'll look into it after we're done porting the resources from 2.6.

[robloo]

@jeromelaban Internally a tool was written to parse source code (xaml and c#) to:

1. List all font icon symbols used in source code
2. Automatically replace the symbols to another font as configured (a few options there like icon size, etc).

This allows me to switch a code base quickly from using Segoe MDL2 Assets to Fluent UI System Icons. I package the Fluent UI System .ttf with the app directly now. This is only needed until we have a cross-platform Segoe Fluent Icon font (I couldn't wait and must switch now). (I'll likely switch the code points back once a true cross platform font is available)

The tool is not general purpose and likely will never be made public. However:

1. I have a mapping file with about 100 icons in it that I would happily donate (I would like to keep it MIT somehow though)
2. There are some lessons learned and the mapping isn't always static. Aside from configuring icon size, some icons can map to more than one location and a priority is needed. Additionally, some Metadata is needed to describe the quality of the mapping itself (is it exact, is it a different purpose icon but visually similar, is no visually or functionally similar icon available so a generic placeholder was used, etc.)

I would like to help specify the mapping file format when you get around to it. Please let me know when this work is ongoing! There is a chance I'll make some things on it public myself as well.

Edit: If someone figures out how to generate a .ttf from svg in c# or even copy glyphs from an existing .ttf to another .ttf with a changed Unicode point, ill even commit to writing the font generation tooling myself! (Under MIT) I have some of the pieces in C# already and experience now going through the fonts.

[robloo]

Good news: FontForge can be scripted with Python. This means I can generate a Python script in C# that can then be run to build a font from a mapping file and source glyphs (SVGs). This is already 50% I would say and I'll probably release it sometime in September. Help will be needed for mapping files of course.

There is also a really cool new feature this will enable. Fonts are quite large and some apps may not want to package the whole thing. This tool could detect the icons used in a C#/XAML application and then generate a custom font containing only the needed glyphs. This would significantly reduce the font file size in some cases.

[robloo]

The (limited) testing was successful! Python script to generate a .ttf fonts using SVG source files works, even on Windows.

I made the repository public and licensed under MIT. https://github.com/robloo/SymbolIconManager.

Most of the hard stuff is done now (architecture & icon set implantations). The font building code is not yet committed. I expect by Tuesday I should have everything done -- with limited glyphs mapped. At that point I'll likely need help with the mappings.

[robloo]

Definitely making progress!

[robloo]

@jeromelaban @davidjohnoliver Could I interest anyone with this?

output_font.zip

I can fully build fonts now using a mapping file: example here Which can be conveniently edited using the editor pictured above (which is actually much quicker than I first though).

Can someone from Uno let me know next steps? Building a Segoe Fluent font with the same glyph coverage as the existing Uno MDL2 assets variant shouldn't take more than a few days of creating mappings.

Ideally, someone at Uno has a record of what glyphs were used for creating the current Uno-variant of Segoe MDL2 assets. I would like to deprecate the Uno.Fonts repository and move everything to the new tooling I have setup here. It is much, much more maintainable and faster to create font variants. With a little work on your own, it's also possible to do new things like manually build fonts with only the glyphs an app uses. This cuts down on space quite a bit.

[davidjohnoliver]

Hi @robloo , this is looking amazing :) It's great that you've taken the time to do this.

I did some digging yesterday re: unoplatform/uno.fonts#16, and found what I could on how the Uno Fluent font was built. (Unfortunately it was originally done in a rush to get Uno 3.0 out on time, and the methodology wasn't ideal.) I'll publish what I was available to find on the Uno.Fonts repo, hopefully some time today.

[robloo]

this is looking amazing :) It's great that you've taken the time to do this.

I had to move to the fluent UI system icons anyway and created the tooling to make that easier (and automatically switch between glyph sizes, etc.). From there it didn't seem like much of a stretch to add the rest -- I already had the design in mind at that point. Additionally, symbol icons are something that has locked me in historically. Removing this lock should help others move around cross-platform as well. I also realize this project is perfect for cross-platform frameworks like Uno, usage outside of that is limited though (I expect there are only a handful of people that will ever use this, the UI frameworks included). Regardless, why not help the few in similar situations :)

Unfortunately it was originally done in a rush to get Uno 3.0 out on time, and the methodology wasn't ideal.

Understandable. Historically there hasn't been a good way to do this anyway. I'll completely rebuild the Segoe Fluent equivalent font eventually. However, I don't really plan on spending the time on Segoe MDL2 assets without data like this.

[robloo]

Looks like the plan worked out and I won't keep commenting in this discussion as direction is all set.

I went ahead and assembled three different glyph mapping sources (including the one provided by Uno above), added a few hundred more, and created the first version of the Fluent font. Further discussion can be on that issue specifically. #5734