@fluentui/react-icons-file-type 0.0.1

package/README.md

@@ -0,0 +1,181 @@
+# @fluentui/react-icons-file-type
+
+File type icon components for React, rendered from Microsoft Fluent CDN-hosted assets. A v9-compatible, dependency-light successor to the v8 `@fluentui/react-file-type-icons` package — no global icon registry and no CDN hardcoded inside the component.
+
+## Installation
+
+```bash
+npm install @fluentui/react-icons-file-type
+```
+
+## Usage
+
+### Zero configuration
+
+The icon resolves its assets from the Fluent CDN by default, so it works out of the box — no provider or setup required.
+
+```tsx
+import { FileTypeIcon } from '@fluentui/react-icons-file-type';
+
+function Example() {
+  return <FileTypeIcon extension="docx" size={24} />;
+}
+```
+
+### Configure the asset host once
+
+Wrap your app (or a subtree) with `FileTypeIconsProvider` to serve the icons from your own host — for example a same-origin CDN proxy.
+
+```tsx
+import { FileTypeIconsProvider, FileTypeIcon } from '@fluentui/react-icons-file-type';
+
+function App() {
+  return (
+    <FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
+      <FileTypeIcon extension="pptx" size={24} />
+    </FileTypeIconsProvider>
+  );
+}
+```
+
+`baseUrl` resolution precedence:
+
+1. the `baseUrl` from the nearest `<FileTypeIconsProvider>`
+2. the Fluent CDN default
+
+### Icons without a file extension
+
+Use the `type` prop with `FileIconType` for icons that aren't tied to an extension (folders, lists, etc.).
+
+```tsx
+import { FileTypeIcon, FileIconType } from '@fluentui/react-icons-file-type';
+
+<FileTypeIcon type={FileIconType.folder} size={24} />;
+```
+
+### Headless (style-free) API
+
+The default `FileTypeIcon` is styled with [Griffel](https://github.com/microsoft/griffel) (zero setup). To avoid bundling the Griffel runtime and own all styling yourself, import from the `/headless` subpath. The component is behavior-identical but ships **no** styling runtime; it tags the `<img>` with a `data-fui-filetype-icon` attribute you can style.
+
+```tsx
+// import the opt-in stylesheet once (reproduces the default box behavior)...
+import '@fluentui/react-icons-file-type/headless/styles.css';
+import { FileTypeIcon } from '@fluentui/react-icons-file-type/headless';
+
+<FileTypeIcon extension="docx" size={24} />;
+```
+
+```css
+/* ...or target the data attribute (or a className) with your own CSS */
+[data-fui-filetype-icon] {
+  display: inline-block;
+  overflow: hidden;
+  object-fit: contain;
+}
+```
+
+The `/headless` entry point re-exports `FileTypeIconsProvider`, `useFileTypeIconsContext`, `FileIconType`, and the constants, so it is usable on its own. Prefer the default entry point unless you specifically need to drop the Griffel runtime.
+
+## Migrating from `@fluentui/react-file-type-icons` (v8)
+
+> This section is written to be self-contained for both humans and automated agents. It lists
+> the exact package/API differences and the rewrite for each v8 usage pattern.
+
+### 1. Package name changed
+
+The package name is **different** (the words are reordered). Update `package.json` and every import.
+
+|          | Package                           |
+| -------- | --------------------------------- |
+| v8 (old) | `@fluentui/react-file-type-icons` |
+| v9 (new) | `@fluentui/react-icons-file-type` |
+
+```bash
+npm uninstall @fluentui/react-file-type-icons
+npm install @fluentui/react-icons-file-type
+```
+
+```diff
+- import { ... } from '@fluentui/react-file-type-icons';
++ import { ... } from '@fluentui/react-icons-file-type';
+```
+
+### 2. There is no global registry / initialization
+
+v8 required `initializeFileTypeIcons()` at app startup to register icons into the global
+`@fluentui/react` (v8) icon registry. v9 has **no global state** — remove the call entirely.
+Assets are resolved per render from the CDN.
+
+```diff
+- import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
+- initializeFileTypeIcons();            // at app startup
+```
+
+### 3. Render with the `FileTypeIcon` component instead of `Icon` + props
+
+v8 produced props for the v8 `<Icon>` component via `getFileTypeIconProps`. v9 ships a
+dedicated component; pass the same options as props.
+
+```diff
+- import { Icon } from '@fluentui/react';
+- import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+- <Icon {...getFileTypeIconProps({ extension: 'docx', size: 24 })} />
++ import { FileTypeIcon } from '@fluentui/react-icons-file-type';
++ <FileTypeIcon extension="docx" size={24} />
+```
+
+The options are the same shape: `extension`, `type`, `size`, and `imageFileType` (`'svg' | 'png'`).
+For non-extension icons use the `type` prop with `FileIconType` (see below).
+
+### 4. Configure a custom CDN via the provider (not an init argument)
+
+```diff
+- initializeFileTypeIcons('https://my-cdn.example.com/item-types/');
++ import { FileTypeIconsProvider } from '@fluentui/react-icons-file-type';
++ <FileTypeIconsProvider baseUrl="https://my-cdn.example.com/item-types/">
++   {/* ...app... */}
++ </FileTypeIconsProvider>
+```
+
+The Fluent CDN remains the **default** in both v8 and v9, so a `baseUrl` is only needed to
+override the host. There is no per-`FileTypeIcon` `baseUrl` prop — configure it on the provider.
+
+### 5. `FileIconType` is now a `const` object, not a TypeScript `enum`
+
+Value usage is unchanged — `FileIconType.folder` still works. The difference is type-level: it
+is a `const` object plus a derived union type rather than a TS `enum`. This avoids a runtime
+reverse-mapping and is generally a drop-in replacement.
+
+```ts
+import { FileTypeIcon, FileIconType } from '@fluentui/react-icons-file-type';
+<FileTypeIcon type={FileIconType.folder} size={24} />;
+```
+
+Notes for code that did unusual things with the v8 enum:
+
+- ✅ `FileIconType.folder` (value access) — unchanged.
+- ✅ `type: FileIconType` (type annotation) — unchanged; `FileIconTypeInput` is also exported and
+  is structurally the numeric union accepted by the `type` prop.
+- ⚠️ Reverse lookup `FileIconType[7]` (number → name) — **not available**. A `const` object has no
+  reverse map. If you relied on this, keep your own name table.
+
+### 6. APIs that were NOT ported
+
+The following v8 exports are intentionally **not** part of the v9 public API. Use the
+`FileTypeIcon` component instead.
+
+| v8 export                               | v9 replacement                                  |
+| --------------------------------------- | ----------------------------------------------- |
+| `initializeFileTypeIcons()`             | _removed_ — no global registry                  |
+| `getFileTypeIconProps()`                | `<FileTypeIcon {...options} />`                 |
+| `getFileTypeIconAsUrl()`                | _not exported_ — use `<FileTypeIcon>`           |
+| `getFileTypeIconAsHTMLString()`         | _not exported_ — use `<FileTypeIcon>`           |
+| `FileTypeIconMap` (raw extension table) | _not exported_ — internal implementation detail |
+
+### v9 public API surface (for reference)
+
+- Components: `FileTypeIcon`, `FileTypeIconsProvider`
+- Hook: `useFileTypeIconsContext`
+- Values: `FileIconType`, `DEFAULT_BASE_URL`, `FLUENT_CDN_BASE_URL`, `DEFAULT_ICON_SIZE`, `ICON_SIZES`
+- Types: `FileTypeIconProps`, `FileTypeIconsContextValue`, `FileTypeIconsProviderProps`,
+  `FileIconTypeInput`, `FileTypeIconSize`, `ImageFileType`

package/lib/FileTypeIcon.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { FileTypeIconProps } from './common/useFileTypeIcon';
+export type { FileTypeIconProps } from './common/useFileTypeIcon';
+/**
+ * Renders a file type icon as an `<img>` sourced from CDN-hosted assets, styled with Griffel
+ * (zero setup required). This is the default entry point.
+ *
+ * It composes the same state ({@link useFileTypeIcon}) and render ({@link renderFileTypeIcon})
+ * hooks as the headless `FileTypeIcon`, inserting a Griffel style hook in between to layer the
+ * static styles. To avoid the Griffel runtime, import from the `/headless` subpath and provide
+ * your own styles (see `headless/styles.css`).
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+export declare const FileTypeIcon: React.FC<FileTypeIconProps>;

package/lib/FileTypeIcon.js

@@ -0,0 +1,19 @@
+import { useFileTypeIcon, renderFileTypeIcon } from './common/useFileTypeIcon';
+import { useFileTypeIconStyles } from './FileTypeIcon.styles';
+/**
+ * Renders a file type icon as an `<img>` sourced from CDN-hosted assets, styled with Griffel
+ * (zero setup required). This is the default entry point.
+ *
+ * It composes the same state ({@link useFileTypeIcon}) and render ({@link renderFileTypeIcon})
+ * hooks as the headless `FileTypeIcon`, inserting a Griffel style hook in between to layer the
+ * static styles. To avoid the Griffel runtime, import from the `/headless` subpath and provide
+ * your own styles (see `headless/styles.css`).
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+export const FileTypeIcon = (props) => {
+    const state = useFileTypeIcon(props);
+    useFileTypeIconStyles(state);
+    return renderFileTypeIcon(state);
+};

package/lib/FileTypeIcon.styles.d.ts

@@ -0,0 +1,7 @@
+import type { FileTypeIconState } from './common/useFileTypeIcon';
+/**
+ * Style hook: layers the Griffel `root` class onto a resolved {@link FileTypeIconState},
+ * merging ahead of any consumer-provided `className`. Mutates and returns the same state,
+ * following the Fluent v9 style-hook convention.
+ */
+export declare function useFileTypeIconStyles(state: FileTypeIconState): FileTypeIconState;

package/lib/FileTypeIcon.styles.js

@@ -0,0 +1,23 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+/**
+ * Static styles for the `FileTypeIcon` image. `object-fit: contain` keeps non-square assets
+ * from being stretched within the square `width`/`height` box (both applied inline by the
+ * state hook from the `size` prop). `object-fit` only affects replaced elements, so these
+ * styles must live on the `<img>` itself, not on a wrapper.
+ */
+const useStyles = makeStyles({
+    root: {
+        display: 'inline-block',
+        objectFit: 'contain',
+    },
+});
+/**
+ * Style hook: layers the Griffel `root` class onto a resolved {@link FileTypeIconState},
+ * merging ahead of any consumer-provided `className`. Mutates and returns the same state,
+ * following the Fluent v9 style-hook convention.
+ */
+export function useFileTypeIconStyles(state) {
+    const styles = useStyles();
+    state.className = mergeClasses(styles.root, state.className);
+    return state;
+}

package/lib/common/FileIconType.d.ts

@@ -0,0 +1,2 @@
+export { FileIconType } from './fileIconTypes.generated';
+export type { FileIconTypeInput } from './fileIconTypes.generated';

package/lib/common/FileIconType.js

@@ -0,0 +1,5 @@
+// Public, stable module path for the file type icon enum. The actual definitions are
+// generated from `fileIconTypes.json` into `fileIconTypes.generated.ts` (run `npm run
+// generate`); this barrel re-exports the public surface so consumers and internal code
+// import from a hand-written path rather than the generated artifact.
+export { FileIconType } from './fileIconTypes.generated';

package/lib/common/FileTypeIconsContext.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface FileTypeIconsContextValue {
+    /**
+     * Base URL used to resolve file type icon assets for all descendant `FileTypeIcon`
+     * components. Defaults to the Fluent CDN so no configuration is required to get started.
+     * Provide your own asset host to serve the icons from a different (e.g. same-origin) location.
+     */
+    baseUrl: string;
+}
+export interface FileTypeIconsProviderProps {
+    /**
+     * Base URL used to resolve file type icon assets.
+     * @default the Fluent CDN base url
+     */
+    baseUrl?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Provides the `baseUrl` used by descendant `FileTypeIcon` components to resolve
+ * their CDN-hosted assets. Omitting `baseUrl` falls back to the Fluent CDN, mirroring
+ * the zero-configuration ergonomics of the legacy `initializeFileTypeIcons` default
+ * without hardcoding the CDN inside the icon component itself.
+ */
+export declare const FileTypeIconsProvider: React.FC<FileTypeIconsProviderProps>;
+/**
+ * Returns the current `FileTypeIcons` context value. When no provider is present, the
+ * default Fluent CDN `baseUrl` is returned so icons render without explicit setup.
+ */
+export declare const useFileTypeIconsContext: () => FileTypeIconsContextValue;

package/lib/common/FileTypeIconsContext.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { DEFAULT_BASE_URL } from './constants';
+const FileTypeIconsContext = React.createContext(undefined);
+/**
+ * Provides the `baseUrl` used by descendant `FileTypeIcon` components to resolve
+ * their CDN-hosted assets. Omitting `baseUrl` falls back to the Fluent CDN, mirroring
+ * the zero-configuration ergonomics of the legacy `initializeFileTypeIcons` default
+ * without hardcoding the CDN inside the icon component itself.
+ */
+export const FileTypeIconsProvider = (props) => {
+    const { baseUrl = DEFAULT_BASE_URL, children } = props;
+    const value = React.useMemo(() => ({ baseUrl }), [baseUrl]);
+    return React.createElement(FileTypeIconsContext.Provider, { value: value }, children);
+};
+/**
+ * Returns the current `FileTypeIcons` context value. When no provider is present, the
+ * default Fluent CDN `baseUrl` is returned so icons render without explicit setup.
+ */
+export const useFileTypeIconsContext = () => {
+    const context = React.useContext(FileTypeIconsContext);
+    return context !== null && context !== void 0 ? context : { baseUrl: DEFAULT_BASE_URL };
+};

package/lib/common/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Base URL of the Microsoft Fluent CDN that hosts the file type icon assets.
+ *
+ * NOTE: this value is intentionally version-stamped by the CDN. It is provided as a
+ * sensible, overridable default so consumers do not need to configure a CDN to get
+ * started. To use your own asset host, supply a `baseUrl` to `FileTypeIconsProvider`
+ * (or to the individual helper functions / the `baseUrl` prop on `FileTypeIcon`).
+ */
+export declare const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20260623.001";
+/**
+ * Default base URL used to resolve file type icon assets when no `baseUrl` is provided.
+ * Points at the `item-types` asset folder on the Fluent CDN.
+ */
+export declare const DEFAULT_BASE_URL: string;
+/** The set of pixel sizes for which file type icon assets are published. */
+export declare const ICON_SIZES: readonly [16, 20, 24, 32, 40, 48, 64, 96];
+/** The default icon size in pixels. */
+export declare const DEFAULT_ICON_SIZE: FileTypeIconSize;
+/** Supported file type icon pixel sizes. */
+export type FileTypeIconSize = (typeof ICON_SIZES)[number];
+/** Supported image file formats for file type icon assets. */
+export type ImageFileType = 'svg' | 'png';

package/lib/common/constants.js

@@ -0,0 +1,18 @@
+/**
+ * Base URL of the Microsoft Fluent CDN that hosts the file type icon assets.
+ *
+ * NOTE: this value is intentionally version-stamped by the CDN. It is provided as a
+ * sensible, overridable default so consumers do not need to configure a CDN to get
+ * started. To use your own asset host, supply a `baseUrl` to `FileTypeIconsProvider`
+ * (or to the individual helper functions / the `baseUrl` prop on `FileTypeIcon`).
+ */
+export const FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260623.001';
+/**
+ * Default base URL used to resolve file type icon assets when no `baseUrl` is provided.
+ * Points at the `item-types` asset folder on the Fluent CDN.
+ */
+export const DEFAULT_BASE_URL = `${FLUENT_CDN_BASE_URL}/assets/item-types/`;
+/** The set of pixel sizes for which file type icon assets are published. */
+export const ICON_SIZES = [16, 20, 24, 32, 40, 48, 64, 96];
+/** The default icon size in pixels. */
+export const DEFAULT_ICON_SIZE = 16;

package/lib/common/fileIconTypes.generated.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Enumerates special file type icons that do not map to any file extensions.
+ * For example, the 'pptx' icon maps to the extensions 'ppt', 'pptm', 'pptx',
+ * but the 'folder' icon does not map to any extensions and should be obtained
+ * via this enum.
+ *
+ * Implemented as a `const` object (rather than a TypeScript `enum`) so it does not
+ * emit a runtime reverse-mapping. The merged `FileIconType` type below lets it be
+ * used as both a value (`FileIconType.folder`) and a type (`type: FileIconType`),
+ * preserving the ergonomics of the previous `enum`. Values start at 1 so they evaluate
+ * as truthy.
+ */
+export declare const FileIconType: {
+    readonly docset: 1;
+    readonly folder: 2;
+    readonly genericFile: 3;
+    readonly listItem: 4;
+    readonly sharedFolder: 5;
+    readonly multiple: 6;
+    readonly stream: 7;
+    readonly news: 8;
+    readonly desktopFolder: 9;
+    readonly documentsFolder: 10;
+    readonly picturesFolder: 11;
+    readonly linkedFolder: 12;
+    readonly list: 13;
+    readonly form: 14;
+    readonly sway: 15;
+    readonly playlist: 16;
+    readonly loopworkspace: 17;
+    readonly planner: 18;
+    readonly todoItem: 19;
+    readonly portfolio: 20;
+    readonly album: 21;
+    readonly listForm: 22;
+    readonly campaign: 23;
+    readonly shortcutsdefaultfolder: 24;
+    readonly pbiApp: 25;
+    readonly pbiDashboard: 26;
+    readonly pbiPaginatedReport: 27;
+    readonly pbiScorecard: 28;
+    readonly pbiSemanticModel: 29;
+    readonly pbiReport: 30;
+};
+export type FileIconType = (typeof FileIconType)[keyof typeof FileIconType];
+/**
+ * Numeric input form of {@link FileIconType}, accepted by the `type` prop / option.
+ * Structurally identical to `FileIconType` (`1 | 2 | … | N`); kept as a named alias
+ * for API stability and call-site readability.
+ */
+export type FileIconTypeInput = FileIconType;
+/**
+ * Icon base name for each numeric {@link FileIconType} value, positionally indexed by
+ * that value (index 0 is unused since values start at 1). Empty entries fall back to the
+ * generic file icon at runtime.
+ */
+export declare const TYPE_TO_ICON_NAME: ReadonlyArray<string>;

package/lib/common/fileIconTypes.generated.js

@@ -0,0 +1,86 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+// AUTO-GENERATED by scripts/generateFileIconTypes.js from src/common/fileIconTypes.json.
+// Do not edit this file manually. Run `npm run generate` to regenerate it.
+/**
+ * Enumerates special file type icons that do not map to any file extensions.
+ * For example, the 'pptx' icon maps to the extensions 'ppt', 'pptm', 'pptx',
+ * but the 'folder' icon does not map to any extensions and should be obtained
+ * via this enum.
+ *
+ * Implemented as a `const` object (rather than a TypeScript `enum`) so it does not
+ * emit a runtime reverse-mapping. The merged `FileIconType` type below lets it be
+ * used as both a value (`FileIconType.folder`) and a type (`type: FileIconType`),
+ * preserving the ergonomics of the previous `enum`. Values start at 1 so they evaluate
+ * as truthy.
+ */
+export const FileIconType = {
+    docset: 1,
+    folder: 2,
+    genericFile: 3,
+    listItem: 4,
+    sharedFolder: 5,
+    multiple: 6,
+    stream: 7,
+    news: 8,
+    desktopFolder: 9,
+    documentsFolder: 10,
+    picturesFolder: 11,
+    linkedFolder: 12,
+    list: 13,
+    form: 14,
+    sway: 15,
+    playlist: 16,
+    loopworkspace: 17,
+    planner: 18,
+    todoItem: 19,
+    portfolio: 20,
+    album: 21,
+    listForm: 22,
+    campaign: 23,
+    shortcutsdefaultfolder: 24,
+    pbiApp: 25,
+    pbiDashboard: 26,
+    pbiPaginatedReport: 27,
+    pbiScorecard: 28,
+    pbiSemanticModel: 29,
+    pbiReport: 30,
+};
+/**
+ * Icon base name for each numeric {@link FileIconType} value, positionally indexed by
+ * that value (index 0 is unused since values start at 1). Empty entries fall back to the
+ * generic file icon at runtime.
+ */
+export const TYPE_TO_ICON_NAME = [
+    '',
+    'docset',
+    'folder',
+    '',
+    'listitem',
+    'sharedfolder',
+    'multiple',
+    'video',
+    'sponews',
+    'desktopfolder',
+    'documentsfolder',
+    'picturesfolder',
+    'linkedfolder',
+    'splist',
+    'form',
+    'sway',
+    'playlist',
+    'loopworkspace',
+    'planner',
+    'todoitem',
+    'portfolio',
+    'album',
+    'listform',
+    'spocampaign',
+    'companyfolder',
+    'pbiapp',
+    'pbidashboard',
+    'pbipagereport',
+    'pbiscorecard',
+    'pbisemmodel',
+    'powerbi', // 30 pbiReport
+];

package/lib/common/fileTypeIconMap.generated.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns the `extension`->`icon name` lookup table, decoding the packed
+ * string on first use and caching the result for subsequent calls.
+ */
+export declare function getFileTypeIconExtensionMap(): Readonly<{
+    [extension: string]: string;
+}>;

package/lib/common/fileTypeIconMap.generated.js

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+// AUTO-GENERATED by scripts/generateFileTypeIconMap.js from src/common/fileTypeIconMap.json.
+// Do not edit this file manually. Run `npm run generate` to regenerate it.
+/**
+ * Minimal packed `icon name`->`extensions` table.
+ *
+ * Format: `icon:ext,ext;icon:ext`. Decoded lazily into an
+ * `extension -> icon name` lookup by {@link getFileTypeIconExtensionMap}.
+ */
+const PACKED_FILE_TYPE_ICON_MAP = 'accdb:accdb,mdb;agentwork:work;aipage:page;archive:7z,ace,arc,arj,dmg,gz,iso,lzh,pkg,rar,sit,tgz,tar,z;audio:aif,aiff,aac,alac,amr,ape,au,awb,dct,dss,dvf,flac,gsm,m4a,m4p,mid,mmf,mp3,oga,ra,rm,wav,wma,wv;calendar:ical,icalendar,ics,ifb,vcs;classifier:classifier;clipchamp:clipchamp;cliptemplate:cliptemplate;code:abap,ada,adp,ahk,as,as3,asc,ascx,asm,asp,awk,bash,bash_login,bash_logout,bash_profile,bashrc,bat,bib,bsh,build,builder,c,cbl,c++,capfile,cc,cfc,cfm,cfml,cl,clj,cls,cmake,cmd,coffee,config,cpp,cpt,cpy,cs,cshtml,cson,csproj,css,ctp,cxx,d,ddl,di,disco,dml,dtd,dtml,el,emakefile,erb,erl,f,f90,f95,fs,fsi,fsscript,fsx,gemfile,gemspec,gitconfig,go,groovy,gvy,h,h++,haml,handlebars,hbs,hcp,hh,hpp,hrl,hs,htc,hxx,idl,iim,inc,inf,ini,inl,ipp,irbrc,jade,jav,java,js,json,jsp,jsproj,jsx,l,less,lhs,lisp,log,lst,ltx,lua,m,mak,make,manifest,master,ml,mli,mll,mly,mm,mud,nfo,opml,osascript,p,pas,patch,php,php2,php3,php4,php5,phtml,pl,pm,pod,pp,profile,ps1,ps1xml,psd1,psm1,pss,pt,py,pyw,r,rake,rb,rbx,rc,rdf,re,reg,rest,resw,resx,rhtml,rjs,rprofile,rpy,rss,rst,ruby,rxml,s,sass,scala,scm,sconscript,sconstruct,script,scss,sgml,sh,shtml,sml,svn-base,swift,sql,sty,tcl,tex,textile,tld,tli,tmpl,tpl,vb,vi,vim,vmg,webpart,wsp,wsdl,xhtml,xoml,xsd,xslt,yaml,yaws,yml,zsh;contact:vcf;copilot:copilot;csv:csv;designer:design;docx:doc,docm,docx,docb;dotx:dot,dotm,dotx;email:eml,msg,oft,ost,pst;exe:application,appref-ms,apk,app,appx,exe,ipa,msi,xap;font:ttf,otf,woff;html:htm,html,mht,mhtml;inkcanvas:canvas;ipynb:nnb,ipynb;link:lnk,link,url,website,webloc;loop:fluid,loop,note;mctemplate:mctemplate;mcworld:mcworld;md:md,markdn,markdown,mdown,mkdn;model:3ds,3mf,blend,cool,dae,df,dwfx,dwg,dxf,fbx,glb,gltf,holo,layer,layout,max,mtl,obj,off,ply,skp,stp,stl,t,thl,x;mpp:mpp;mpt:mpt;officescript:osts;one:one,onepart;onepage:onepage;onetoc:ms-one-stub,onetoc,onetoc2,onepkg;pdf:pdf;photo:arw,bmp,cr2,crw,dic,dicm,dcm,dcm30,dcr,dds,dib,dng,erf,gif,heic,heif,ico,jfi,jfif,jif,jpe,jpeg,jpg,jxr,kdc,mrw,nef,orf,pct,pict,png,pns,psb,psd,raw,tga,tif,tiff,wdp;potx:pot,potm,potx;powerbi:pbids,pbix;ppsx:pps,ppsm,ppsx;pptx:ppt,pptm,pptx,sldx,sldm;presentation:odp,gslides,key;pub:pub;rtf:epub,gdoc,odt,rtf,wri,pages;spo:aspx;spreadsheet:odc,ods,gsheet,numbers,tsv;sysfile:bak,bin,cab,cache,cat,cer,class,dat,db,dbg,dl_,dll,ithmb,jar,kb,ldt,lrprev,pkpass,ppa,ppam,pdb,rom,thm,thmx,vsl,xla,xlam,xlb,xll;txt:dif,diff,readme,out,plist,properties,text,txt;vector:ai,ait,cvs,dgn,gdraw,pd,emf,eps,fig,ind,indd,indl,indt,indb,ps,svg,svgz,wmf,oxps,xps,xd,sketch;video:3g2,3gp,3gp2,3gpp,asf,avi,dvr-ms,flv,m1v,m4v,mkv,mod,mov,mm4p,mp2,mp2v,mp4,mp4v,mpa,mpe,mpeg,mpg,mpv,mpv2,mts,ogg,qt,swf,ts,vob,webm,wlmp,wm,wmv,wmx;vsdx:vdx,vsd,vsdm,vsdx,vsw,vdw;vssx:vss,vssm,vssx;vstx:vst,vstm,vstx,vsx;whiteboard:whiteboard,wbtx;xlsx:xlc,xls,xlsb,xlsm,xlsx,xlw;xltx:xlt,xltm,xltx;xml:xaml,xml,xsl;xsn:xsn;zip:zip';
+let _extensionToIconName;
+/**
+ * Returns the `extension`->`icon name` lookup table, decoding the packed
+ * string on first use and caching the result for subsequent calls.
+ */
+export function getFileTypeIconExtensionMap() {
+    if (!_extensionToIconName) {
+        _extensionToIconName = {};
+        for (const group of PACKED_FILE_TYPE_ICON_MAP.split(';')) {
+            const [iconName, extensions] = group.split(':');
+            for (const extension of extensions.split(',')) {
+                _extensionToIconName[extension] = iconName;
+            }
+        }
+    }
+    return _extensionToIconName;
+}

package/lib/common/fileTypeIconResolver.d.ts

@@ -0,0 +1,59 @@
+import type { FileIconType, FileIconTypeInput } from './FileIconType';
+import type { FileTypeIconSize, ImageFileType } from './constants';
+/**
+ * The icon-identifying options shared by the `FileTypeIcon` component and the
+ * standalone resolvers: which icon (by `extension` or `type`), at what `size`,
+ * and in which image format.
+ */
+export interface FileTypeIconOptions {
+    /**
+     * The file extension, such as `pptx`, for which an icon is needed. For file type icons
+     * that are not associated with a file extension, such as `folder`, use the `type` property.
+     */
+    extension?: string;
+    /**
+     * The type of file type icon needed. Use this for icons that are not associated with a
+     * file extension, such as `folder`.
+     */
+    type?: FileIconTypeInput;
+    /**
+     * The size of the icon in pixels.
+     * @default 16
+     */
+    size?: FileTypeIconSize;
+    /**
+     * The image format to use.
+     * @default 'svg'
+     */
+    imageFileType?: ImageFileType;
+}
+/**
+ * Resolves the icon base name (e.g. `docx`) for the given file `extension` or
+ * {@link FileIconType}. Extension takes precedence over type; unknown or absent
+ * inputs fall back to the generic file icon.
+ */
+export declare function getFileTypeIconNameFromExtensionOrType(extension: string | undefined, type: FileIconType | undefined): string;
+/**
+ * Resolves the CDN-relative standard-density (1x) source URL for a file type icon.
+ *
+ * This is the deterministic, SSR-safe fallback used for the `<img src>` attribute. For
+ * device-pixel-ratio-aware selection, pair it with {@link getFileTypeIconSrcSet} on `srcset`.
+ *
+ * @param options - the file type icon options (extension/type, size, imageFileType)
+ * @param baseUrl - the base url to resolve the asset against. Defaults to the Fluent CDN.
+ * @returns the fully-qualified icon url.
+ */
+export declare function getFileTypeIconSrc(options: FileTypeIconOptions, baseUrl?: string): string;
+/**
+ * Resolves the CDN-relative `srcset` for a file type icon: a comma-separated list of every
+ * published density variant with its `1x`/`1.5x`/… descriptor.
+ *
+ * Letting the browser pick the density (instead of reading `devicePixelRatio` in JS) keeps the
+ * rendered markup identical on the server and the client, avoiding hydration mismatches and the
+ * flicker/redundant-fetch of a post-mount density swap.
+ *
+ * @param options - the file type icon options (extension/type, size, imageFileType)
+ * @param baseUrl - the base url to resolve the assets against. Defaults to the Fluent CDN.
+ * @returns the `srcset` value, e.g. `…/24/docx.png 1x, …/24_1.5x/docx.png 1.5x, …`.
+ */
+export declare function getFileTypeIconSrcSet(options: FileTypeIconOptions, baseUrl?: string): string;