mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 10:11:31 +00:00
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`).
27 lines
1.2 KiB
Markdown
27 lines
1.2 KiB
Markdown
# @storyteller/icons
|
|
|
|
Companion lib for [Lucide](https://lucide.dev) icons. Regular icons come straight from
|
|
`lucide-react` — import them directly:
|
|
|
|
```tsx
|
|
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` /
|
|
`StandardDefinitionIcon` quality 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`.
|