Add custom database type icons throughout UI#17
Conversation
Replaces generic SF Symbols with official database logos: - MySQL: dolphin logo - MariaDB: seal logo - PostgreSQL: elephant logo - SQLite: feather logo Changes: - Add SVG icon assets to Assets.xcassets with template rendering - Update DatabaseType.iconName to return asset names - Update all Image() calls to use template rendering mode - Apply consistent icon sizing and color tinting Icons now appear in: - Welcome screen connection list - Sidebar connection header - Toolbar connection status All icons respect custom connection colors and work in light/dark mode.
There was a problem hiding this comment.
Pull request overview
This PR replaces generic SF Symbol icons with custom SVG database logos (MySQL, MariaDB, PostgreSQL, SQLite) to improve visual identification throughout the application. The changes update the DatabaseType.iconName property to return asset names instead of SF Symbol names, and apply template rendering mode with color tinting across the welcome screen, sidebar, and toolbar components.
Key Changes
- Added custom SVG icon assets for all four database types with template rendering configuration
- Updated
DatabaseType.iconNameto return asset names ("mysql-icon", "mariadb-icon", etc.) instead of SF Symbol names - Modified icon rendering in UI components to use
.renderingMode(.template)for color tinting support
Reviewed changes
Copilot reviewed 8 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| TablePro/Models/DatabaseConnection.swift | Updated iconName property to return custom asset names instead of SF Symbol names |
| TablePro/Views/WelcomeWindowView.swift | Changed connection row to use custom database icons with template rendering |
| TablePro/Views/Toolbar/ConnectionStatusView.swift | Updated toolbar database icon to use custom assets with template mode |
| TablePro/Views/Connection/ConnectionSidebarHeader.swift | Modified sidebar header icons to use custom database assets with template rendering |
| TablePro/Assets.xcassets/mysql-icon.imageset/* | Added MySQL dolphin logo SVG with template rendering configuration |
| TablePro/Assets.xcassets/mariadb-icon.imageset/* | Added MariaDB seal logo SVG with template rendering configuration |
| TablePro/Assets.xcassets/postgresql-icon.imageset/* | Added PostgreSQL elephant logo SVG with template rendering configuration |
| TablePro/Assets.xcassets/sqlite-icon.imageset/* | Added SQLite feather logo SVG with template rendering configuration |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Database type icon | ||
| Image(connection.type.iconName) | ||
| .renderingMode(.template) | ||
| .font(.system(size: DesignConstants.IconSize.medium)) |
There was a problem hiding this comment.
The .font() modifier only works with SF Symbols loaded via Image(systemName:). For custom asset images loaded with Image(_:), this modifier has no effect. Since you're now loading custom SVG icons from assets, you should either: 1) remove this line and rely on the .frame() modifier for sizing, or 2) add .resizable() before .font() to properly scale the image. The recommended approach is to remove .font() and use .resizable().aspectRatio(contentMode: .fit) if the frame alone doesn't scale the image correctly.
| .font(.system(size: DesignConstants.IconSize.medium)) | |
| .resizable() | |
| .aspectRatio(contentMode: .fit) |
| Image(systemName: databaseType.iconName) | ||
| Image(databaseType.iconName) | ||
| .renderingMode(.template) | ||
| .font(.system(size: DesignConstants.IconSize.default)) |
There was a problem hiding this comment.
The .font() modifier only works with SF Symbols loaded via Image(systemName:). For custom asset images loaded with Image(_:), this modifier has no effect. Since you're now loading custom SVG icons from assets, you should either: 1) remove this line and rely on the frame size for the icon, or 2) add .resizable() modifier to make the image scalable. The recommended approach is to use .resizable().aspectRatio(contentMode: .fit).frame(width: size, height: size) to properly scale the custom icon.
| .font(.system(size: DesignConstants.IconSize.default)) | |
| .resizable() | |
| .aspectRatio(contentMode: .fit) | |
| .frame(width: DesignConstants.IconSize.default, | |
| height: DesignConstants.IconSize.default) |
| Image(systemName: session.connection.type.iconName) | ||
| Image(session.connection.type.iconName) | ||
| .renderingMode(.template) | ||
| .font(.system(size: DesignConstants.IconSize.medium)) |
There was a problem hiding this comment.
The .font() modifier only works with SF Symbols loaded via Image(systemName:). For custom asset images loaded with Image(_:), this modifier has no effect. Since you're now loading custom SVG icons from assets, you should either: 1) remove this line and use a frame size, or 2) add .resizable() modifier to make the image scalable. The recommended approach is to use .resizable().aspectRatio(contentMode: .fit).frame(width: size, height: size) to properly scale the custom icon.
| .font(.system(size: DesignConstants.IconSize.medium)) | |
| .resizable() | |
| .aspectRatio(contentMode: .fit) | |
| .frame(width: DesignConstants.IconSize.medium, | |
| height: DesignConstants.IconSize.medium) |
Summary
Replaces generic SF Symbol icons with official database logos to improve visual identification of database types throughout the application.
Changes
DatabaseType.iconNameto return asset names instead of SF Symbol namesDatabase Icons
Visual Impact
Icons now clearly identify database types at a glance while maintaining:
Testing
Screenshots
Icons visible in welcome screen connection list, sidebar header, and toolbar status