Skip to content

Comments

feat: fallback to UIImage(named:) for custom symbol/image sets in tab…#14

Open
HaywhyD wants to merge 1 commit intoserverpod:mainfrom
HaywhyD:custom-cn-icons
Open

feat: fallback to UIImage(named:) for custom symbol/image sets in tab…#14
HaywhyD wants to merge 1 commit intoserverpod:mainfrom
HaywhyD:custom-cn-icons

Conversation

@HaywhyD
Copy link

@HaywhyD HaywhyD commented Feb 20, 2026

Summary

Adds UIImage(named:) fallback to CupertinoTabBarPlatformView so that CNTabBar can render custom SF Symbols from the app's Xcode asset catalog, in addition to Apple's built-in SF Symbols.

What changed

All 3 buildItems functions in CupertinoTabBarPlatformView.swift now try:

image = UIImage(systemName: symbols[i])   // built-in SF Symbols
    ?? UIImage(named: symbols[i])          // custom symbols from Assets.xcassets

Non-breaking — existing code using built-in SF Symbol names works exactly as before.


Usage Guide

1. Create Custom SF Symbols

Important: Custom symbols must be created using Apple's SF Symbols app — regular SVGs will not work.

  1. Open the SF Symbols app (free download from Apple)
  2. Create or import your custom symbol
  3. Export: Right-click → Export Symbol → save as .svg

2. Add to Xcode Asset Catalog

  1. Open your Flutter project's iOS workspace: open ios/Runner.xcworkspace
  2. Navigate to Runner → Assets.xcassets
  3. Drag your exported .svg into the asset catalog — Xcode creates a Symbol Image Set (.symbolset)
  4. Note the asset name (filename without extension, e.g. my-custom-icon)

3. Use in Dart

CNTabBarItem(
  label: 'Home',
  icon: CNSymbol('my-custom-icon', size: 18),
)

4. Naming

⚠️ Custom symbol names must NOT conflict with built-in SF Symbol names (systemName is tried first).

Use a unique prefix: myapp-home ✅, house ❌ (conflicts with built-in SF Symbol)

5. Android

⚠️ On Android, CNTabBar falls back to CupertinoTabBar which does NOT render custom icons (shows circles). Use a platform check and provide a separate Android nav bar.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant