landvex: Fixar och tester klara för alla komponenter
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
This commit is contained in:
Bernt
@@ -0,0 +1,176 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user