Tüm ikonlar lucide-react kütüphanesinden geliyor (1000+ ikon)
Strateji: Lucide React'te olan her şeyi Lucide'dan al, sadece brand logoları (Google/Apple gibi) için custom SVG kullan. Bu sayede hem kütüphane avantajlarından yararlanıyoruz, hem de social login için gerekli brand identity'yi koruyoruz.
FingerprintScanFaceQrCodeShieldMailCheckPhoneCallUserCheckLockKeyEyeEyeOffGoogleIconCustom SVGAppleIconCustom SVGGithubLucideHomePackageUsersSettingsTwitterFacebookLinkedinMail// Lucide React'ten (1000+ ikon)
import {
Github,
Fingerprint,
ScanFace,
QrCode,
Shield,
Eye,
EyeOff,
MailCheck,
PhoneCall,
Home,
Package,
Users,
Settings,
} from 'lucide-react'
// Custom Brand Icons (sadece 2 ikon)
import {
GoogleIcon,
AppleIcon
} from '@hascanb/arf-ui-kit/auth-kit'
// Kullanım - aynı props interface
<Button>
<GoogleIcon size={20} /> {/* Custom SVG */}
<Github size={20} /> {/* Lucide */}
</Button>interface IconProps extends SVGProps<SVGSVGElement> {
size?: number | string
color?: string
strokeWidth?: number
absoluteStrokeWidth?: boolean
}
// Kullanım örnekleri
<Chrome size={24} />
<Chrome size={32} color="red" />
<Chrome size={20} className="text-blue-500" />
<Chrome size={24} strokeWidth={2} />
<Chrome
size={32}
className="text-red-500 hover:text-red-700"
onClick={() => alert('Clicked!')}
/>1000+ ikon arasından arama yapın:
lucide.dev/icons →import {
Github,
Fingerprint,
Shield,
} from 'lucide-react'
<Github size={20} />1000+ ikon, sıfır bakım, auto TypeScript
import {
GoogleIcon,
AppleIcon
} from '@.../auth-kit'
<GoogleIcon size={20} />Sadece 2 ikon, brand identity için gerekli
Neden sadece 2 Custom SVG? Lucide React'te trademark/legal sebeplerle brand logoları (Google, Apple, Facebook vb.) yok. Bunlar social login için şart. Geri kalan tüm ikonlar (Fingerprint, Shield, Eye, Lock, Key vb.) Lucide'da var, onları custom yapmaya gerek yok.