# TKAWEN Iconography

## The rule

**Use [Lucide](https://lucide.dev) (`lucide-react`, `lucide-vue-next`, `lucide-static`) as the canonical icon library across every TKAWEN product.**

Reasons:
- 1,500+ icons — covers every B2B SaaS use case
- Single style — no mixing of metaphors (cf. mixed Heroicons + Material in older MyStoq pages)
- Maintained, free, MIT-licensed
- Tree-shakable — pay-only-for-what-you-use

## House style — non-negotiable

```css
.tkw-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;   /* inherits from surrounding text — never hard-code */
}

.tkw-icon-sm  { width: 16px; height: 16px; stroke-width: 2; }   /* tight UI: inline, badges */
.tkw-icon-md  { width: 20px; height: 20px; stroke-width: 1.85; } /* buttons */
.tkw-icon-lg  { width: 24px; height: 24px; stroke-width: 1.75; } /* default — content/forms */
.tkw-icon-xl  { width: 32px; height: 32px; stroke-width: 1.5; }  /* hero/feature cards */
.tkw-icon-2xl { width: 48px; height: 48px; stroke-width: 1.25; } /* very large empty states */
```

## Forbidden mixes

❌ Don't mix Lucide with Heroicons / Tabler / Material in the same view — visual inconsistency reads cheap.
❌ Don't recolor stroke + fill — Lucide is stroke-only by convention.
❌ Don't add custom shadows or gradients to icons — keep them flat.

## Brand glyphs (different from UI icons)

Brand glyphs (the layered-square marks of TKAWEN/MyStoq/etc.) are NOT Lucide icons. They're filled, gradient, multi-layer marks that live in `parent/` and `products/{slug}/` — they should never be confused with the UI icon set.

When you need to embed the brand mark inline (e.g. as a button leading to TKAWEN ID auth), use the SVG mark directly — not a Lucide approximation.

## Vue 3 helper

```vue
<!-- Wrap Lucide icon imports in a single Icon component for consistency. -->
<script setup lang="ts">
import { computed } from 'vue';
import * as LucideIcons from 'lucide-vue-next';

const props = defineProps<{ name: keyof typeof LucideIcons; size?: 'sm'|'md'|'lg'|'xl'|'2xl' }>();
const Cmp = computed(() => LucideIcons[props.name]);
const klass = computed(() => `tkw-icon tkw-icon-${props.size || 'lg'}`);
</script>

<template>
  <component :is="Cmp" :class="klass" stroke-width="1.75"/>
</template>
```

Usage:

```vue
<Icon name="ShoppingCart" size="md"/>
<Icon name="ShieldCheck"/>
<Icon name="ChevronRight" size="sm"/>
```

## React helper

```tsx
import * as LucideIcons from 'lucide-react';

const SIZE_MAP = { sm: 16, md: 20, lg: 24, xl: 32, '2xl': 48 } as const;
const STROKE_MAP = { sm: 2, md: 1.85, lg: 1.75, xl: 1.5, '2xl': 1.25 } as const;

export function Icon({ name, size = 'lg' }: { name: keyof typeof LucideIcons; size?: keyof typeof SIZE_MAP }) {
  const Cmp = LucideIcons[name] as React.ComponentType<{ size: number; strokeWidth: number; className: string }>;
  return <Cmp size={SIZE_MAP[size]} strokeWidth={STROKE_MAP[size]} className={`tkw-icon tkw-icon-${size}`}/>;
}
```

## Forbidden icons (DZ context)

The following are off-brand for the Algerian market and should NEVER appear in TKAWEN UIs:

- 🐷 pig / piggy-bank → use `Wallet`, `Coins`, `BadgeDollarSign` instead
- 🐶 dog / paw → use `Heart`, `Smile`, `Bone` (only if pet context)
- ✝ cross / religious symbols → use `Plus`, `Shield` instead

## Audit checklist when adopting in a product

1. Replace all `@heroicons`, `tabler-icons`, `react-icons`, `unplugin-icons` (mixed sets) → `lucide-{vue-next,react}`
2. Wrap with the `Icon` component above — bans ad-hoc icon imports
3. Apply tokens: only `currentColor`, only the `tkw-icon-*` size classes
4. Run a grep for any inline SVG icons — replace or move to a shared component
