BFlat
b36e4fd27b
Removes Font Awesome entirely
### Changes
- All ~1,000 icon call sites now import Lucide components directly from
`lucide-react` (`<PlayIcon className="..." />`); no FA packages, tokens,
or `fa*` identifiers remain anywhere.
- New `@storyteller/icons` lib holds the pieces Lucide doesn't ship:
`DynamicIcon` for runtime-chosen icons (`icon={loading ?
LoaderCircleIcon : SaveIcon}`), 11 brand logos (Discord, TikTok, ...) as
inlined CC BY 4.0 paths, and HD/SD quality badges drawn in Lucide's
stroke style.
- Global `.lucide { display: inline-block; width/height: 1.2em }` rule
in each app stylesheet: keeps icons font-relative like FA (1.2em
compensates Lucide's 24px-viewBox/20px-grid padding) and undoes Tailwind
preflight's `svg { display: block }`. Explicit `w-*`/`size-*` utilities
still win.
- FA-only props migrated: `spin` → `animate-spin`, FA size strings → em
values.
- Dropped `@fortawesome/*` + `@awesome.me` kit deps, both `.npmrc`
files, and
the FA rule in `shared-vite-config.ts` (now externalizes
`lucide-react`).
@storyteller/icons
Companion lib for Lucide icons. Regular icons come straight from
lucide-react — import them directly:
import { PlayIcon } from 'lucide-react';
<PlayIcon className="h-4 w-4" />
This lib holds the pieces Lucide doesn't provide:
dynamic-icon.tsx—<DynamicIcon icon={active ? PauseIcon : PlayIcon} />for icons chosen at runtime (item.icon, conditional toggles). Static call sites should render the Lucide component directly.brand-icons.tsx— brand logos (DiscordIcon,TiktokIcon, ...) as inlined SVG paths; Lucide ships no brand marks by policy.custom-icons.tsx— icons with no Lucide equivalent (HighDefinitionIcon/StandardDefinitionIconquality badges), drawn in Lucide's stroke style.
Sizing: each app's global stylesheet sets .lucide { width/height: 1.2em } so Lucide icons
scale with the surrounding font size (1.2em because Lucide draws on a 20px grid inside its
24px viewBox — the visible mark then fills a full em, matching the previous solid-glyph
icon sizes). Explicit Tailwind sizing classes still win. Brand icons from this lib are
full-bleed paths and default to a plain 1em.