@menumalsuite/design-system 0.0.5 → 0.1.0

package/app/assets/README.md

@@ -0,0 +1,66 @@
+# Custom Icons (menumal:)
+
+Icone custom del design system. Usabili con prefisso `menumal:`.
+
+```vue
+<UIcon name="menumal:bean" />
+<UIcon name="menumal:bean-fill" />
+```
+
+## Varianti disponibili
+
+Stesso sistema di Phosphor — suffisso nel nome:
+
+| suffisso | variante |
+|----------|----------|
+| (nessuno) | regular |
+| `-thin` | thin |
+| `-light` | light |
+| `-bold` | bold |
+| `-fill` | fill |
+| `-duotone` | duotone |
+
+## Come funziona
+
+`@nuxt/icon` usa **CSS mask mode**: ogni icona diventa uno `<span>` vuoto con una CSS mask dell'SVG. Il colore viene da `background-color: currentColor`, che eredita il CSS `color` del parent — quindi funziona con Tailwind (`text-white`, `text-primary`, ecc.) esattamente come Phosphor e HugeIcons.
+
+Per farlo funzionare, i file SVG devono:
+1. Usare `fill="currentColor"` sui path (non colori hardcodati)
+2. **Non** avere `fill="none"` sul tag `<svg>` root — viene ereditato dai figli e blocca `currentColor`
+
+Figma esporta con colore hardcodato (es. `#343330`, `#3B3634`) e `fill="none"` sul root SVG — entrambi vanno corretti prima dell'uso.
+
+## Aggiungere una nuova icona
+
+1. Esporta da Figma come SVG — **solo Format=Outline**, tutte le varianti weight
+2. Rinomina la cartella esportata con il nome semantico dell'icona (es. `shrimp`) e mettila dentro `app/assets/icons/`
+3. Esegui questo script dalla root del progetto:
+
+```bash
+ICON="nome-icona"  # cambia questo
+SRC="app/assets/icons/$ICON"
+DEST="app/assets/icons"
+
+declare -A W=(["Regular"]="" ["Bold"]="-bold" ["Thin"]="-thin" ["Light"]="-light" ["Fill"]="-fill" ["Duotone"]="-duotone")
+for w in Regular Bold Thin Light Fill Duotone; do
+  cp "$SRC/Format=Outline, Weight=${w}.svg" "$DEST/${ICON}${W[$w]}.svg"
+done
+
+# Rimuovi fill="none" dal tag <svg> root
+sed -i '' 's/ fill="none"//g' "$DEST/${ICON}"*.svg
+
+# Sostituisce colori hardcodati Figma con currentColor
+sed -i '' 's/fill="#343330"/fill="currentColor"/g' "$DEST/${ICON}"*.svg
+sed -i '' 's/fill="#3B3634"/fill="currentColor"/g' "$DEST/${ICON}"*.svg
+
+# Rimuovi cartella temporanea
+rm -rf "$SRC"
+```
+
+4. Hard restart del dev server nel progetto consumer: `rm -rf .nuxt && npm run dev`
+
+> Se le icone appaiono ancora con colore sbagliato, apri un SVG e cerca `fill="#..."` — aggiungi il colore trovato allo script sopra.
+
+## Icone presenti
+
+`money-up` · `money-down` · `peanuts` · `walnut` · `bean` · `celery` · `seed` · `shell` · `corn`