.NET MAUI application that demonstrates recoloring, resizing, and rotation of vector graphics. This repro includes a script for converting SVG icons to a TTF font. The .NET MAUI demonstrates how to access the icons from the TTF font.
Install Node.JS / NPM package https://www.npmjs.com/package/fantasticon and run the conversion script:
# Ubuntu / WSL script
sudo apt update
sudo apt install npm
sudo npm install -g fantasticon
cd maui-svg-ttf/scripts
./makefonts.sh
Make sure your new font my-icons.ttf
gets copied to your Resources/fonts/
folder.
// MauiProgram.cs ...
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
fonts.AddFont("my-icons.ttf", "my-icons");
});
builder.Services.AddTransient<MainViewModel>();
builder.Services.AddTransient<MainPage>();
<VerticalStackLayout>
<Label Text="Globe " FontFamily="my-icons" TextColor="{Binding Color}"/>
<Image HeightRequest="32" WidthRequest="32">
<Image.Source>
<FontImageSource Glyph="" FontFamily="my-icons" Color="{Binding Color}" Size="32" />
</Image.Source>
</Image>
<Slider Minimum="0" Maximum="255" Value="{Binding RedValue, Mode=TwoWay}"/>
</VerticalStackLayout>