Bernt
aee0f09db8
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
177 lines
4.4 KiB
Markdown
177 lines
4.4 KiB
Markdown
# Iconography Rules — LandveX Design System
|
|
|
|
## Core Principle
|
|
|
|
**No generic emojis. Ever.**
|
|
|
|
Generic emojis (🔒 💳 🆔 📋 ✅ ❌ ⚠️) are:
|
|
- Visually inconsistent across platforms
|
|
- Not controllable (Apple, Google, Samsung render differently)
|
|
- Unprofessional in enterprise contexts
|
|
- Impossible to brand
|
|
|
|
## Rule: Custom SVG Icons Only
|
|
|
|
| ❌ Forbidden | ✅ Required |
|
|
|-------------|-------------|
|
|
| 🔒 Lock | Custom lock icon from icon library |
|
|
| 💳 Card | Custom payment icon |
|
|
| 🆔 ID | Custom identity/verification icon |
|
|
| 📋 Clipboard | Custom document icon |
|
|
| ✅ Check | Custom checkmark icon |
|
|
| ❌ Cross | Custom X/close icon |
|
|
| ⚠️ Warning | Custom warning triangle |
|
|
| 📧 Email | Custom envelope icon |
|
|
| 📱 Phone | Custom phone icon |
|
|
| 🗺️ Map | Custom map pin icon |
|
|
|
|
## Implementation
|
|
|
|
### Option 1: Lucide Icons (recommended)
|
|
```bash
|
|
npm install lucide-react
|
|
```
|
|
|
|
```tsx
|
|
import { Lock, CreditCard, Shield, FileText, Check, X, AlertTriangle, Mail, Phone, MapPin } from 'lucide-react';
|
|
|
|
// Use instead of emojis
|
|
<Lock className="icon-security" />
|
|
<CreditCard className="icon-payment" />
|
|
<Shield className="icon-verified" />
|
|
```
|
|
|
|
### Option 2: Custom SVG
|
|
```tsx
|
|
const IconLock = () => (
|
|
<svg viewBox="0 0 24 24" className="icon">
|
|
<rect x="5" y="11" width="14" height="10" rx="2" />
|
|
<path d="M7 11V7a5 5 0 0110 0v4" />
|
|
</svg>
|
|
);
|
|
```
|
|
|
|
## Icon Categories
|
|
|
|
### Security & Trust
|
|
| Purpose | Lucide Icon | Class |
|
|
|---------|-------------|-------|
|
|
| Secure/Locked | `Lock` | `icon-security` |
|
|
| Verified | `ShieldCheck` | `icon-verified` |
|
|
| GDPR/Compliance | `FileCheck` | `icon-compliance` |
|
|
| Identity | `Fingerprint` | `icon-identity` |
|
|
|
|
### Payment & Financial
|
|
| Purpose | Lucide Icon | Class |
|
|
|---------|-------------|-------|
|
|
| Payment | `CreditCard` | `icon-payment` |
|
|
| Payout | `Banknote` | `icon-payout` |
|
|
| Credits | `Coins` | `icon-credits` |
|
|
| Invoice | `Receipt` | `icon-invoice` |
|
|
|
|
### Communication
|
|
| Purpose | Lucide Icon | Class |
|
|
|---------|-------------|-------|
|
|
| Email | `Mail` | `icon-email` |
|
|
| SMS | `MessageSquare` | `icon-sms` |
|
|
| Notification | `Bell` | `icon-notification` |
|
|
| Support | `Headphones` | `icon-support` |
|
|
|
|
### Status
|
|
| Purpose | Lucide Icon | Class |
|
|
|---------|-------------|-------|
|
|
| Success | `CheckCircle2` | `icon-success` |
|
|
| Error | `XCircle` | `icon-error` |
|
|
| Warning | `AlertTriangle` | `icon-warning` |
|
|
| Info | `Info` | `icon-info` |
|
|
| Pending | `Clock` | `icon-pending` |
|
|
|
|
### Actions
|
|
| Purpose | Lucide Icon | Class |
|
|
|---------|-------------|-------|
|
|
| Upload | `Upload` | `icon-upload` |
|
|
| Download | `Download` | `icon-download` |
|
|
| Edit | `Pencil` | `icon-edit` |
|
|
| Delete | `Trash2` | `icon-delete` |
|
|
| Search | `Search` | `icon-search` |
|
|
| Filter | `Filter` | `icon-filter` |
|
|
|
|
## quiXzoom-Specific Icons
|
|
|
|
| Feature | Icon | Usage |
|
|
|---------|------|-------|
|
|
| Camera/Mission | `Camera` | Mission cards |
|
|
| Location | `MapPin` | Mission location |
|
|
| Distance | `Navigation` | Distance indicator |
|
|
| Time | `Clock` | Estimated time |
|
|
| Photos | `Image` | Photo count |
|
|
| Credits | `Coins` | Credit reward |
|
|
| Approval | `CheckCircle2` | Approval status |
|
|
| Payout | `Banknote` | Weekly payout |
|
|
|
|
## Styling
|
|
|
|
```css
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.icon-small { width: 16px; height: 16px; }
|
|
.icon-large { width: 24px; height: 24px; }
|
|
.icon-xl { width: 32px; height: 32px; }
|
|
|
|
/* Status colors */
|
|
.icon-success { color: var(--color-success-500); }
|
|
.icon-error { color: var(--color-danger-500); }
|
|
.icon-warning { color: var(--color-warning-500); }
|
|
.icon-info { color: var(--color-info-500); }
|
|
```
|
|
|
|
## Migration Guide
|
|
|
|
### Step 1: Find all emojis
|
|
```bash
|
|
grep -r "[🔒💳🆔📋✅❌⚠️📧📱🗺️]" src/
|
|
```
|
|
|
|
### Step 2: Replace with icons
|
|
```tsx
|
|
// Before
|
|
<span>🔒 GDPR Compliant</span>
|
|
|
|
// After
|
|
<span><Lock className="icon icon-security" /> GDPR Compliant</span>
|
|
```
|
|
|
|
### Step 3: Verify
|
|
- No emojis in source code
|
|
- All icons from approved library
|
|
- Consistent sizing and styling
|
|
|
|
## Enforcement
|
|
|
|
**ESLint Rule:**
|
|
```json
|
|
{
|
|
"rules": {
|
|
"no-restricted-syntax": [
|
|
"error",
|
|
{
|
|
"selector": "Literal[value=/[\\u{1F300}-\\u{1F9FF}]/u]",
|
|
"message": "No emojis allowed. Use Lucide icons instead."
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
## Status
|
|
|
|
**Rule:** ✅ LOCKED
|
|
**Migration:** 🔄 IN PROGRESS (quixzoom.com)
|
|
**Target:** Zero emojis by 2026-07-05
|