# `lr-file-icon` - **Import** `import '@aceshooting/lyra-ui/components/lr-file-icon.js';` (stable tag alias; registers the tag) - **Class** `LyraFileIcon`, also available unregistered from `@aceshooting/lyra-ui/components/media/file-icon/file-icon.class.js` - **Family** `components/media/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 5 parts, 3 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-file-icon` Localized, tokenized file-format badge for surrounding upload rows, cards, selectors, and viewer headers. The companion `getFileTypeMetadata(mimeType, fileName?)` utility covers common document, spreadsheet, presentation, code, archive, image, audio, and video formats. An explicit known MIME type wins; filename extension fallback is used only for an empty or `application/octet-stream` MIME type. Unknown values return a generic file result. **Properties:** `mimeType` (attribute `mime-type`), `name`, `bytes` (file size **in bytes**, shown next to the label in `mode="label"`; `0`, the default, renders no size), `label`, `decorative`, `mode: LyraFileIconMode = 'icon' | 'label'` (invalid values normalize to `icon`), and `registry: LyraFileTypeMetadataRegistry` (property-only, defaulting to the immutable built-in registry). A host `aria-label` wins over the computed localized file-type/size name. `decorative` changes the semantic owner to presentation and renders `aria-hidden="true"` explicitly. **Renamed in 8.0.0 — breaking:** the byte count is `bytes`, not `size`. Everywhere else in this library `size` names a tier on the shared size ladder, and a numeric byte count answering to the same property name is a collision a consumer only discovers at runtime. A leftover `size="245000"` is an unknown attribute now: `bytes` stays `0` and the badge silently renders without a size. **CSS parts:** `base`, `icon`, `label`, `description` (consumer-authored registry metadata in label mode), and `size` (the part keeps its name — it is the rendered size _text_, and renaming a part would break shipped `::part()` rules for no gain). **Themeable custom properties:** `--lr-file-icon-size` (default `var(--lr-size-2rem)` — the format badge's inline and block size). `--lr-file-icon-bg` (default `var(--lr-color-brand-quiet)`) and `--lr-file-icon-color` (default `var(--lr-color-brand)`) retint the `icon` badge — every file category renders the same fill today, so either can be set without hijacking the shared `--lr-color-brand-quiet`/`--lr-color-brand` tokens used elsewhere in the theme. **Exports:** `LyraFileTypeMetadata`, `LyraFileTypeMetadataEntry`, `LyraResolvedFileTypeMetadata`, `LyraFileTypeMetadataRegistry`, `LyraFileTypeIcon`, `LyraFileTypeCategory`, `createFileTypeMetadataRegistry(entries)`, `defaultFileTypeMetadataRegistry`, and the compatibility lookup `getFileTypeMetadata()`. Registries validate and deeply snapshot records, use deterministic longest registered-suffix matching (including multi-dot/punctuation suffixes), and isolate custom mappings per instance instead of mutating module-global state. Consumer labels/descriptions remain verbatim; built-in labels route through localization. ```html ```