import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { UX4GColors } from './colors';
import SvgNationalAmblamLogo from '../assets/icons/NationalEmblemLogoSvg';
import SvgUnion from '../assets/icons/UnionSvg';
let Svg: any = null;
let Path: any = null;
let G: any = null;
try {
const RNSvg = require('react-native-svg');
Svg = RNSvg.Svg || RNSvg.default;
Path = RNSvg.Path;
G = RNSvg.G;
} catch (e) {
// react-native-svg not present, fallback to Material Symbols icon representation
}
export type Ux4gIconName =
| 'check'
| 'close'
| 'search'
| 'arrow-back'
| 'arrow-forward'
| 'chevron-down'
| 'chevron-up'
| 'chevron-left'
| 'chevron-right'
| 'info'
| 'warning'
| 'error'
| 'success'
| 'calendar'
| 'time'
| 'upload'
| 'download'
| 'aadhaar'
| 'pan'
| 'biometric'
| 'verification'
| 'star'
| 'mic'
| 'settings'
| 'menu'
| 'notifications'
| 'scan'
| 'sentiment-very-dissatisfied'
| 'sentiment-dissatisfied'
| 'sentiment-neutral'
| 'sentiment-satisfied'
| 'sentiment-very-satisfied'
| 'thumb-up'
| 'national-emblem-logo'
| 'union'
| 'home'
| 'services'
| 'status'
| 'alerts'
| 'profile'
| 'add'
| 'dashboard'
| 'applications'
| 'help'
| 'sign-out'
| 'logout'
| 'account-circle'
| string;
export interface Ux4gIconData {
name: Ux4gIconName;
size?: number;
color?: string;
}
export interface Ux4gIconProps {
size?: number;
color?: string;
}
const renderMaterialIcon = (
name: string,
size: number,
color: string,
fill = false
): React.ReactElement => {
return (
{name}
);
};
/**
* **Ux4gIcons**
*
* Exact icon asset definitions matching Flutter `icons.dart` (`verification`, `star`, `shield`, `check`, etc.)
* for 100% exact visual parity in React Native. Uses Material Symbols without emojis.
*/
export const Ux4gIcons = {
/**
* Scalloped verification checkmark badge asset (`verification.svg`).
*/
verification: ({ size = 18, color = UX4GColors.blue600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path && G) {
return (
);
}
return renderMaterialIcon('verified', size, color, true);
},
/**
* Gold 5-pointed star badge asset (`star.svg`).
*/
star: ({ size = 24, color = UX4GColors.gold500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('star', size, color, true);
},
/**
* Shield security icon asset matching `Icons.shield`.
*/
shield: ({ size = 12, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('shield', size, color, true);
},
/**
* Checkmark icon (`Icons.check`).
*/
check: ({ size = 12, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('check', size, color);
},
/**
* Thumb Up icon (`Icons.thumb_up`).
*/
thumbUp: ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('thumb_up', size, color);
},
'sentiment-very-dissatisfied': ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_very_dissatisfied', size, color);
},
'sentiment-dissatisfied': ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_dissatisfied', size, color);
},
'sentiment-neutral': ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_neutral', size, color);
},
'sentiment-satisfied': ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_satisfied', size, color);
},
'sentiment-very-satisfied': ({ size = 24, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_very_satisfied', size, color);
},
close: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('close', size, color);
},
add: ({ size = 18, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('add', size, color);
},
arrowDropDown: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('arrow_drop_down', size, color);
},
arrowUp: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('arrow_drop_up', size, color);
},
chevronLeft: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('chevron_left', size, color);
},
chevronRight: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('chevron_right', size, color);
},
chevronDown: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('expand_more', size, color);
},
chevronUp: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('expand_less', size, color);
},
search: ({ size = 18, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('search', size, color);
},
calendar: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('calendar_today', size, color);
},
arrowBack: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('arrow_back', size, color);
},
arrowForward: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('arrow_forward', size, color);
},
time: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('schedule', size, color);
},
info: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('info', size, color, true);
},
error: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('error', size, color, true);
},
/**
* Info outline icon (`Icons.info_outline`).
*/
infoOutline: ({ size = 20, color = UX4GColors.cyan600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('info', size, color);
},
/**
* Warning amber rounded icon (`Icons.warning_amber_rounded`).
*/
warningAmber: ({ size = 20, color = UX4GColors.orange600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('warning', size, color);
},
warning: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('warning', size, color, true);
},
success: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('check_circle', size, color, true);
},
visibility: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('visibility', size, color);
},
visibilityOff: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('visibility_off', size, color);
},
lock: ({ size = 16, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('lock', size, color, true);
},
/**
* Reverse filled info / exclamation icon matching Flutter `Ux4gIcons.fillRevInfo`.
*/
fillRevInfo: ({ size = 20, color = UX4GColors.red600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('error', size, color, true);
},
mic: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('mic', size, color);
},
settings: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('settings', size, color);
},
menu: ({ size = 24, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('menu', size, color);
},
notifications: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('notifications', size, color);
},
scan: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('qr_code_scanner', size, color);
},
location: ({ size = 20, color = 'UX4GColors.white' }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('location_on', size, color);
},
link: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('link', size, color);
},
/**
* Cloud upload outlined icon (`Icons.cloud_upload_outlined`).
*/
cloudUpload: ({ size = 24, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('cloud_upload', size, color);
},
/**
* Camera icon (`Icons.camera_alt`).
*/
camera: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('photo_camera', size, color);
},
/**
* Image file icon (`Icons.image`).
*/
imageFile: ({ size = 20, color = UX4GColors.blue600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('image', size, color);
},
/**
* PDF file icon (`Icons.picture_as_pdf`).
*/
pdf: ({ size = 20, color = UX4GColors.red600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('picture_as_pdf', size, color);
},
/**
* Document file icon (`Icons.description`).
*/
docFile: ({ size = 20, color = UX4GColors.primary600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('description', size, color);
},
/**
* Generic file icon (`Icons.insert_drive_file`).
*/
insertDriveFile: ({ size = 20, color = UX4GColors.neutral500 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('insert_drive_file', size, color);
},
/**
* Error outline icon (`Icons.error_outline`).
*/
errorOutline: ({ size = 20, color = UX4GColors.red600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('error_outline', size, color);
},
/**
* Check circle icon (`Icons.check_circle`).
*/
checkCircle: ({ size = 20, color = UX4GColors.green600 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('check_circle', size, color, true);
},
sentimentVeryDissatisfied: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_very_dissatisfied', size, color);
},
sentimentDissatisfied: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_dissatisfied', size, color);
},
sentimentNeutral: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_neutral', size, color);
},
sentimentSatisfied: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_satisfied', size, color);
},
sentimentVerySatisfied: ({ size = 20, color = UX4GColors.neutral900 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('sentiment_very_satisfied', size, color);
},
nationalEmblemLogo: ({ size = 26 }: Ux4gIconProps = {}): React.ReactElement => (
),
union: ({ size = 20 }: Ux4gIconProps = {}): React.ReactElement => (
),
/**
* Home outline/filled navigation icon
*/
home: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('home', size, color);
},
/**
* Services / Grid 4-square icon
*/
services: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('grid_view', size, color);
},
/**
* Status / Clipboard checklist icon
*/
status: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('assignment', size, color);
},
/**
* Alerts / Notifications Bell icon
*/
alerts: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('notifications', size, color);
},
/**
* Profile / User outline icon
*/
profile: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('account_circle', size, color);
},
/**
* Dashboard icon (4 squares grid)
*/
dashboard: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('grid_view', size, color);
},
/**
* Applications / Clipboard icon
*/
applications: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('assignment', size, color);
},
/**
* Help & Support outline icon
*/
help: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('help_outline', size, color);
},
/**
* Sign out / Exit door icon
*/
signOut: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('logout', size, color);
},
logout: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('logout', size, color);
},
/**
* Account / User circle icon
*/
accountCircle: ({ size = 22, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('account_circle', size, color);
},
/**
* Mail / Inbox icon
*/
inbox: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('mail', size, color);
},
mail: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('mail', size, color);
},
/**
* Layers / Documents / Stack icon
*/
layers: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('layers', size, color);
},
documents: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('layers', size, color);
},
/**
* Sent / Send diagonal arrow icon
*/
send: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('north_east', size, color);
},
/**
* Drafts / Draft document icon
*/
drafts: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('drafts', size, color);
},
/**
* Archive / Box icon
*/
archive: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('archive', size, color);
},
/**
* Priority / Exclamation icon
*/
priority: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('priority_high', size, color);
},
priorityApplications: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('priority_high', size, color);
},
/**
* Bookmark / Saved items icon
*/
bookmark: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('bookmark_border', size, color);
},
saved: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('bookmark_border', size, color);
},
/**
* Track / Location pin icon
*/
track: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('location_on', size, color);
},
/**
* Vertical 3-dots / More Vert icon
*/
moreVert: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('more_vert', size, color);
},
inboxSettings: ({ size = 20, color = UX4GColors.neutral700 }: Ux4gIconProps = {}): React.ReactElement => {
if (Svg && Path) {
return (
);
}
return renderMaterialIcon('more_vert', size, color);
},
};
const styles = StyleSheet.create({
fallbackBox: {
borderRadius: 999,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
},
fallbackText: {
color: 'UX4GColors.white',
fontWeight: 'bold',
textAlign: 'center',
includeFontPadding: false,
textAlignVertical: 'center',
},
});