maui-app-icons-splash
0
总安装量
1
周安装量
安装命令
npx skills add https://github.com/davidortinau/maui-skills --skill maui-app-icons-splash
Agent 安装分布
amp
1
cline
1
opencode
1
cursor
1
kimi-cli
1
codex
1
Skill 文档
.NET MAUI App Icons & Splash Screens
Use this skill when configuring app icons, splash screens, or troubleshooting image asset issues in .NET MAUI projects.
App Icons
Single-source icon
Add one MauiIcon item in the .csproj; the build resizes it for every platform:
<MauiIcon Include="Resources\AppIcon\appicon.svg"
Color="#512BD4" />
- Source: SVG (recommended) or PNG. SVGs are converted to platform PNGs at build.
- Color: Background fill behind the icon (hex or named color).
- BaseSize: Logical size before platform scaling (default
456,456for icons). - TintColor: Recolors the foreground of a single-layer icon.
Composed / layered icons
Use Include (background) + ForegroundFile (foreground) for a two-layer icon:
<MauiIcon Include="Resources\AppIcon\appicon.svg"
ForegroundFile="Resources\AppIcon\appiconfg.svg"
ForegroundScale="0.65"
Color="#512BD4" />
- ForegroundFile: SVG/PNG overlaid on the background.
- ForegroundScale: Scale factor for the foreground layer (0.0â1.0).
- Composed icons automatically produce Android adaptive icons (API 26+).
Platform-specific references
| Platform | Where the icon is referenced |
|---|---|
| Android | AndroidManifest.xml â android:icon="@mipmap/appicon" |
| iOS / Mac Cat | Info.plist â XSAppIconAssets = "Assets.xcassets/appicon.appiconset" |
| Windows | Auto-configured via the build; no manual reference needed |
Sizing guidelines
- Provide the largest resolution you need; the tooling scales down.
- For SVG sources,
BaseSizecontrols the logical canvas size. - Android generates
mdpithroughxxxhdpivariants automatically. - iOS generates all required
@1x,@2x,@3xsizes.
Splash Screens
Basic splash screen
Add one MauiSplashScreen item in the .csproj:
<MauiSplashScreen Include="Resources\Splash\splash.svg"
Color="#512BD4"
BaseSize="128,128" />
- Color: Background color of the splash screen.
- BaseSize: Logical size of the splash image (default
128,128). - TintColor: Recolors the splash image foreground.
Platform behavior
Android (12+)
- The splash icon is centered on a colored background.
- Uses
@style/Maui.SplashThemeset inAndroidManifest.xml:<activity android:theme="@style/Maui.SplashTheme" ... /> - Pre-Android 12 uses the same theme with a legacy splash.
iOS / Mac Catalyst
- Build generates
MauiSplash.storyboardin the app bundle. - Referenced automatically in
Info.plist(UILaunchStoryboardName).
Windows
- The splash image is embedded in the app package; no extra config needed.
SVG to PNG conversion
- All SVG sources (
MauiIcon,MauiSplashScreen,MauiImage) are rasterized to PNGs at build time by theMicrosoft.Maui.ResizetizerMSBuild task. - Conversion respects
BaseSize,TintColor, andColorproperties. - To skip resizing for a pre-made PNG, set
Resize="false". - If an SVG renders incorrectly, simplify paths or supply a PNG instead.
Image sizing best practices
- Use SVG whenever possible â one file, infinite scaling, smaller repo.
- Set
BaseSizeexplicitly when your SVG viewBox doesn’t match the desired logical size. - Keep splash images simple â large or complex SVGs slow build and may render with artifacts.
- Test on real devices â emulator densities can mask icon cropping, especially Android adaptive icon safe zones.
- Avoid transparency in splash
Colorâ some platforms ignore alpha and show black instead.
Quick troubleshooting
| Symptom | Likely fix |
|---|---|
| Icon appears blank or white | Check Color vs TintColor; ensure SVG paths exist |
| Splash shows default .NET logo | Verify MauiSplashScreen item is in the .csproj |
| Android icon looks clipped | Use composed icon with ForegroundScale="0.65" |
| Build error on SVG | Simplify SVG or switch to PNG with Resize="false" |