340 lines
15 KiB
TypeScript
340 lines
15 KiB
TypeScript
/**
|
|
* GUARDiA Messenger — 라인 아이콘 컴포넌트 (React Native)
|
|
* react-native-svg 없이 View + StyleSheet만 사용하여 선 아이콘을 구현.
|
|
* 폐쇄망/온프레미스 환경 호환.
|
|
* stroke 스타일은 View border로 표현, 복잡한 패스는 Text 유니코드 대체.
|
|
*/
|
|
|
|
import { View, StyleSheet, Text } from 'react-native'
|
|
|
|
interface Props {
|
|
name: keyof typeof ICONS
|
|
size?: number
|
|
color?: string
|
|
}
|
|
|
|
/** 아이콘 이름 → 렌더 함수 맵 */
|
|
const ICONS = {
|
|
dashboard: (s: number, c: string) => <DashboardIcon size={s} color={c} />,
|
|
sr: (s: number, c: string) => <SrIcon size={s} color={c} />,
|
|
chat: (s: number, c: string) => <ChatIcon size={s} color={c} />,
|
|
bell: (s: number, c: string) => <BellIcon size={s} color={c} />,
|
|
settings: (s: number, c: string) => <SettingsIcon size={s} color={c} />,
|
|
server: (s: number, c: string) => <ServerIcon size={s} color={c} />,
|
|
alert: (s: number, c: string) => <AlertIcon size={s} color={c} />,
|
|
check: (s: number, c: string) => <CheckIcon size={s} color={c} />,
|
|
sync: (s: number, c: string) => <SyncIcon size={s} color={c} />,
|
|
user: (s: number, c: string) => <UserIcon size={s} color={c} />,
|
|
lock: (s: number, c: string) => <LockIcon size={s} color={c} />,
|
|
globe: (s: number, c: string) => <GlobeIcon size={s} color={c} />,
|
|
mail: (s: number, c: string) => <MailIcon size={s} color={c} />,
|
|
send: (s: number, c: string) => <SendIcon size={s} color={c} />,
|
|
mic: (s: number, c: string) => <MicIcon size={s} color={c} />,
|
|
building: (s: number, c: string) => <BuildingIcon size={s} color={c} />,
|
|
ai: (s: number, c: string) => <AiIcon size={s} color={c} />,
|
|
zap: (s: number, c: string) => <ZapIcon size={s} color={c} />,
|
|
} as const
|
|
|
|
export default function LineIcon({ name, size = 22, color = '#00A0C8' }: Props) {
|
|
const renderer = ICONS[name]
|
|
if (!renderer) return null
|
|
return renderer(size, color)
|
|
}
|
|
|
|
/* ─── 개별 아이콘 구현 ───────────────────────────── */
|
|
|
|
function DashboardIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'flex-end', gap: 2, flexDirection: 'row', alignItems: 'flex-end' }}>
|
|
<View style={{ width: size * 0.22, height: size * 0.45, borderWidth: b, borderColor: color, borderRadius: 2 }} />
|
|
<View style={{ width: size * 0.22, height: size * 0.65, borderWidth: b, borderColor: color, borderRadius: 2 }} />
|
|
<View style={{ width: size * 0.22, height: size * 0.85, borderWidth: b, borderColor: color, borderRadius: 2 }} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function SrIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.72, height: size * 0.82, borderWidth: b, borderColor: color, borderRadius: 3 }}>
|
|
<View style={{ marginTop: size * 0.22, marginHorizontal: size * 0.1 }}>
|
|
<View style={{ height: b, backgroundColor: color, marginBottom: size * 0.1 }} />
|
|
<View style={{ height: b, backgroundColor: color, width: '75%', marginBottom: size * 0.1 }} />
|
|
<View style={{ height: b, backgroundColor: color, width: '55%' }} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function ChatIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.82, height: size * 0.68,
|
|
borderWidth: b, borderColor: color, borderRadius: size * 0.14,
|
|
position: 'relative',
|
|
}}>
|
|
<View style={{
|
|
position: 'absolute', bottom: -size * 0.22, left: size * 0.1,
|
|
width: size * 0.18, height: size * 0.18,
|
|
borderRightWidth: b, borderBottomWidth: b, borderColor: color,
|
|
transform: [{ rotate: '45deg' }],
|
|
}} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function BellIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.62, height: size * 0.55,
|
|
borderWidth: b, borderColor: color,
|
|
borderTopLeftRadius: size * 0.31, borderTopRightRadius: size * 0.31,
|
|
borderBottomWidth: 0, marginTop: size * 0.1,
|
|
}} />
|
|
<View style={{ width: size * 0.75, height: b, backgroundColor: color }} />
|
|
<View style={{
|
|
width: size * 0.28, height: size * 0.14,
|
|
borderWidth: b, borderColor: color,
|
|
borderTopWidth: 0, borderRadius: size * 0.07,
|
|
marginTop: -b,
|
|
}} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function SettingsIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
const r = (size - b * 2) / 2
|
|
const innerR = r * 0.3
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.55, height: size * 0.55,
|
|
borderWidth: b, borderColor: color, borderRadius: size,
|
|
}} />
|
|
<View style={{
|
|
position: 'absolute',
|
|
width: size * 0.22, height: size * 0.22,
|
|
borderWidth: b, borderColor: color, borderRadius: size,
|
|
backgroundColor: 'transparent',
|
|
}} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function ServerIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center', gap: size * 0.06 }}>
|
|
<View style={{ width: size * 0.82, height: size * 0.32, borderWidth: b, borderColor: color, borderRadius: 3 }}>
|
|
<View style={{ width: size * 0.08, height: size * 0.08, borderRadius: size, backgroundColor: color,
|
|
position: 'absolute', top: '50%', left: size * 0.05, marginTop: -size * 0.04 }} />
|
|
</View>
|
|
<View style={{ width: size * 0.82, height: size * 0.32, borderWidth: b, borderColor: color, borderRadius: 3 }}>
|
|
<View style={{ width: size * 0.08, height: size * 0.08, borderRadius: size, backgroundColor: color,
|
|
position: 'absolute', top: '50%', left: size * 0.05, marginTop: -size * 0.04 }} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function AlertIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: 0, height: 0,
|
|
borderLeftWidth: size * 0.45, borderRightWidth: size * 0.45,
|
|
borderBottomWidth: size * 0.8,
|
|
borderLeftColor: 'transparent', borderRightColor: 'transparent',
|
|
borderBottomColor: color,
|
|
opacity: 0.15,
|
|
position: 'absolute',
|
|
}} />
|
|
<View style={{
|
|
width: 0, height: 0,
|
|
borderLeftWidth: size * 0.41, borderRightWidth: size * 0.41,
|
|
borderBottomWidth: size * 0.73,
|
|
borderLeftColor: 'transparent', borderRightColor: 'transparent',
|
|
borderBottomColor: 'white',
|
|
position: 'absolute', bottom: size * 0.04,
|
|
}} />
|
|
<View style={{ position: 'absolute', bottom: size * 0.23, alignItems: 'center', gap: 2 }}>
|
|
<View style={{ width: b * 1.5, height: size * 0.22, backgroundColor: color, borderRadius: 2 }} />
|
|
<View style={{ width: b * 1.5, height: b * 1.5, backgroundColor: color, borderRadius: size }} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function CheckIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.82, height: size * 0.82,
|
|
borderWidth: b, borderColor: color, borderRadius: size,
|
|
}}>
|
|
<View style={{ position: 'absolute', top: '35%', left: '20%',
|
|
width: size * 0.2, height: b * 1.5, backgroundColor: color,
|
|
transform: [{ rotate: '45deg' }] }} />
|
|
<View style={{ position: 'absolute', top: '22%', left: '32%',
|
|
width: size * 0.38, height: b * 1.5, backgroundColor: color,
|
|
transform: [{ rotate: '-55deg' }] }} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function SyncIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.7, height: size * 0.7,
|
|
borderWidth: b, borderColor: color, borderRadius: size,
|
|
borderTopColor: 'transparent',
|
|
}} />
|
|
<View style={{
|
|
position: 'absolute', top: size * 0.04,
|
|
width: 0, height: 0,
|
|
borderLeftWidth: size * 0.1, borderRightWidth: size * 0.1,
|
|
borderBottomWidth: size * 0.15,
|
|
borderLeftColor: 'transparent', borderRightColor: 'transparent',
|
|
borderBottomColor: color,
|
|
}} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function UserIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, alignItems: 'center', paddingTop: size * 0.05 }}>
|
|
<View style={{ width: size * 0.38, height: size * 0.38, borderWidth: b, borderColor: color, borderRadius: size }} />
|
|
<View style={{
|
|
width: size * 0.7, height: size * 0.35,
|
|
borderWidth: b, borderColor: color,
|
|
borderTopLeftRadius: size * 0.35, borderTopRightRadius: size * 0.35,
|
|
borderBottomWidth: 0, marginTop: size * 0.04,
|
|
}} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function LockIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
|
|
<View style={{
|
|
width: size * 0.5, height: size * 0.26,
|
|
borderWidth: b, borderColor: color,
|
|
borderTopLeftRadius: size * 0.25, borderTopRightRadius: size * 0.25,
|
|
borderBottomWidth: 0, marginBottom: -b,
|
|
}} />
|
|
<View style={{ width: size * 0.7, height: size * 0.42, borderWidth: b, borderColor: color, borderRadius: 5 }}>
|
|
<View style={{ width: b * 2, height: b * 2, backgroundColor: color, borderRadius: size,
|
|
alignSelf: 'center', marginTop: size * 0.12 }} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function GlobeIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.82, height: size * 0.82, borderWidth: b, borderColor: color, borderRadius: size }} />
|
|
<View style={{ position: 'absolute', width: size * 0.82, height: b, backgroundColor: color, top: '50%', marginTop: -b / 2 }} />
|
|
<View style={{ position: 'absolute', height: size * 0.82, width: b, backgroundColor: color, left: '50%', marginLeft: -b / 2 }} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function MailIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.82, height: size * 0.6, borderWidth: b, borderColor: color, borderRadius: 4 }}>
|
|
<View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: size * 0.26,
|
|
borderBottomWidth: b, borderBottomColor: color, transform: [{ skewX: '0deg' }] }}>
|
|
<View style={{ width: '100%', height: '100%', opacity: 0.3, backgroundColor: color, borderRadius: 2 }} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function SendIcon({ size, color }: { size: number; color: string }) {
|
|
return (
|
|
<Text style={{ fontSize: size * 0.7, color, lineHeight: size }}>➤</Text>
|
|
)
|
|
}
|
|
|
|
function MicIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.32, height: size * 0.48, borderWidth: b, borderColor: color,
|
|
borderRadius: size * 0.16, marginTop: size * 0.06 }} />
|
|
<View style={{
|
|
width: size * 0.55, height: size * 0.28,
|
|
borderWidth: b, borderColor: color,
|
|
borderTopLeftRadius: size * 0.28, borderTopRightRadius: size * 0.28,
|
|
borderBottomWidth: 0, marginTop: size * 0.02,
|
|
}} />
|
|
<View style={{ width: b, height: size * 0.12, backgroundColor: color }} />
|
|
<View style={{ width: size * 0.3, height: b, backgroundColor: color }} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function BuildingIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'flex-end', alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.7, height: size * 0.7, borderWidth: b, borderColor: color, borderRadius: 2 }}>
|
|
<View style={{ position: 'absolute', top: size * 0.1, left: size * 0.1,
|
|
width: size * 0.15, height: size * 0.15, borderWidth: b, borderColor: color }} />
|
|
<View style={{ position: 'absolute', top: size * 0.1, right: size * 0.1,
|
|
width: size * 0.15, height: size * 0.15, borderWidth: b, borderColor: color }} />
|
|
<View style={{ position: 'absolute', top: size * 0.3, left: size * 0.1,
|
|
width: size * 0.15, height: size * 0.15, borderWidth: b, borderColor: color }} />
|
|
<View style={{ position: 'absolute', top: size * 0.3, right: size * 0.1,
|
|
width: size * 0.15, height: size * 0.15, borderWidth: b, borderColor: color }} />
|
|
</View>
|
|
<View style={{ width: b, height: size * 0.15, backgroundColor: color, position: 'absolute', bottom: 0, left: size * 0.2 }} />
|
|
<View style={{ width: b, height: size * 0.15, backgroundColor: color, position: 'absolute', bottom: 0, right: size * 0.2 }} />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function AiIcon({ size, color }: { size: number; color: string }) {
|
|
const b = size * 0.07
|
|
return (
|
|
<View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
|
|
<View style={{ width: size * 0.82, height: size * 0.55, borderWidth: b, borderColor: color, borderRadius: 5 }}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', flex: 1, paddingHorizontal: size * 0.06 }}>
|
|
{[0,1,2].map(i => (
|
|
<View key={i} style={{ width: size * 0.12, height: size * 0.12, borderWidth: b, borderColor: color, borderRadius: size }} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function ZapIcon({ size, color }: { size: number; color: string }) {
|
|
return (
|
|
<Text style={{ fontSize: size * 0.75, color, lineHeight: size }}>⚡</Text>
|
|
)
|
|
}
|