managarten/apps/picture/packages/mobile-ui/components/ui/Icon/Icon.tsx
Wuesteon d36b321d9d style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)
2025-11-27 18:33:16 +01:00

108 lines
2.9 KiB
TypeScript

import { Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { SymbolView, SFSymbol } from 'expo-symbols';
export type IconProps = {
name: string;
size?: number;
color?: string;
weight?: 'regular' | 'medium' | 'semibold' | 'bold';
style?: any;
};
const iconMap: Record<string, string> = {
'chevron-back': 'chevron.left',
'chevron-forward': 'chevron.right',
'chevron-up': 'chevron.up',
'chevron-down': 'chevron.down',
'arrow-back': 'arrow.left',
'arrow-forward': 'arrow.right',
close: 'xmark',
menu: 'line.3.horizontal',
add: 'plus',
remove: 'minus',
checkmark: 'checkmark',
'close-circle': 'xmark.circle.fill',
search: 'magnifyingglass',
filter: 'line.3.horizontal.decrease.circle',
settings: 'gearshape',
trash: 'trash',
pencil: 'pencil',
create: 'square.and.pencil',
save: 'square.and.arrow.down',
share: 'square.and.arrow.up',
refresh: 'arrow.clockwise',
image: 'photo',
images: 'photo.stack',
camera: 'camera',
heart: 'heart.fill',
'heart-outline': 'heart',
star: 'star.fill',
'star-outline': 'star',
bookmark: 'bookmark.fill',
'bookmark-outline': 'bookmark',
send: 'paperplane.fill',
mail: 'envelope',
notifications: 'bell',
'notifications-outline': 'bell',
'ellipsis-vertical': 'ellipsis',
'ellipsis-horizontal': 'ellipsis',
grid: 'square.grid.2x2',
list: 'list.bullet',
eye: 'eye',
'eye-off': 'eye.slash',
'information-circle': 'info.circle',
warning: 'exclamationmark.triangle',
'alert-circle': 'exclamationmark.circle',
'checkmark-circle': 'checkmark.circle',
person: 'person.fill',
'person-outline': 'person',
'person-circle': 'person.circle.fill',
'person-circle-outline': 'person.circle',
people: 'person.2.fill',
location: 'location.fill',
home: 'house.fill',
'home-outline': 'house',
time: 'clock',
calendar: 'calendar',
today: 'calendar.badge.clock',
document: 'doc.fill',
'document-outline': 'doc',
folder: 'folder.fill',
'folder-outline': 'folder',
download: 'arrow.down.circle',
'cloud-download': 'cloud.fill',
'cloud-offline': 'cloud.slash',
'lock-closed': 'lock.fill',
'lock-open': 'lock.open.fill',
key: 'key.fill',
shield: 'shield.fill',
flame: 'flame.fill',
sparkles: 'sparkles',
layers: 'square.stack.3d.up.fill',
'layers-outline': 'square.stack.3d.up',
tag: 'tag.fill',
pricetag: 'tag.fill',
paintbrush: 'paintbrush.fill',
'color-palette': 'paintpalette.fill',
};
export function Icon({ name, size = 24, color = '#000', weight = 'regular', style }: IconProps) {
if (Platform.OS === 'ios') {
const sfSymbolName = iconMap[name] || name;
const sfWeight: 'regular' | 'medium' | 'semibold' | 'bold' = weight;
return (
<SymbolView
name={sfSymbolName as SFSymbol}
size={size}
tintColor={color}
weight={sfWeight}
style={style}
resizeMode="scaleAspectFit"
/>
);
}
return <Ionicons name={name as any} size={size} color={color} style={style} />;
}