Recommended Component Structure (Figma)

To get predictable paths and clean exports, follow this structure:

ai-chat (component group)
├─ Solid (instance)
│   └─ Slice → icons/solid/symbols/chevron
└─ Outline (instance)
    └─ Slice → icons/outline/symbols/chevron

• Slice name drives the final file path:
  icons/{style}/{category}/{icon-name}
  e.g. icons/solid/symbols/chevron.svg

• {style}: solid | outline (or your naming)

• {category}: thematic grouping (e.g. symbols, navigation, files)

• {icon-name}: lowercase, hyphen-separated

Why it matters

Consistent structure = predictable file paths = seamless repo diffs and imports.

Best Practices

• Keep Solid/Outline as instances (with a Variant property to swap in designs).
• Name vector paths meaningfully (avoid vector, union).
• One slice per export target; avoid flattening unless needed.

Common Gotchas

• Spaces / uppercase in file names → use kebab-case.
• Deeply nested frames can add accidental transforms; keep icon frames minimal.
• Stroke expansion may change rendering; rely on SVGO + consistent strokes instead.