#240
IconFallback
Two large avatars whose fallback is a custom icon: one with an image that fails to decode and one with no image.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "IconFallback" pattern (@codeatlasdev/ui demo #240, display/avatar) in my app.
Call get_demo({ ids: ["#240"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Representing groups or bots, where initials do not make sense, with a lucide icon.
Keep these library parts, with the props and tokens the demo uses:
- Avatar from "@codeatlasdev/ui"
Behaviour to keep:
- `<Avatar src="data:image/png;base64,AAAA" alt="Family" size="lg" loading="lazy" referrerpolicy="no-referrer">` uses an image that fails to decode
- `{#snippet fallback()}<Users size={22} aria-hidden="true" />{/snippet}` renders the Users icon
- `<Avatar alt="Support bot" size="lg">` has no `src`
- `{#snippet fallback()}<Bot size={22} aria-hidden="true" />{/snippet}` renders the Bot icon
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Avatar
@codeatlasdev/ui
How it is built
- `<Avatar src="data:image/png;base64,AAAA" alt="Family" size="lg" loading="lazy" referrerpolicy="no-referrer">` uses an image that fails to decode
- `{#snippet fallback()}<Users size={22} aria-hidden="true" />{/snippet}` renders the Users icon
- `<Avatar alt="Support bot" size="lg">` has no `src`
- `{#snippet fallback()}<Bot size={22} aria-hidden="true" />{/snippet}` renders the Bot icon
Related
Loading source.