@fabric-msft/visuals

Empty-state illustrations and other product imagery for Microsoft Fabric.

Install

yarn add @fabric-msft/visuals

Quick start

import { esAddItem100 } from "@fabric-msft/visuals";

// Each illustration is its own named export with one or more variants:
esAddItem100.light; // → string URL

Drop the URL into whatever renders best for your framework:

HTML / Angular

<img [src]="esAddItem100.light" alt="" aria-hidden="true" />

React

<img src={esAddItem100.light} alt="" aria-hidden />

Vue / Svelte / anywhere else — same idea. The URL is just a string.

Each illustration is a separate named export so consumer bundlers (webpack 5, esbuild, Rollup, Vite) tree-shake the ones you don't import. Only the illustrations you actually reference end up in your bundle.

Theme-aware lookup

Most illustrations have light and dark variants. To pick one based on the current theme, fall back to light when a dark variant is missing:

const url = deBuildALakehouse320x168[theme] ?? deBuildALakehouse320x168.light;

TypeScript will tell you at compile time which illustrations don't have a dark variant — useful when your design needs both.

Variants

Every illustration has one or more of these keys:

| Key | When it exists | | ------------- | ---------------------------------------- | | light | Always (the canonical asset) | | dark | When the designer shipped a dark version | | motion | Animated variant, no theme | | lightMotion | Animated light variant | | darkMotion | Animated dark variant |

Need React components instead?

If you'd rather have JSX components than <img> tags, import from the /components subpath:

import { EsAddItem100 } from "@fabric-msft/visuals/components";

<EsAddItem100 aria-hidden />;

This pulls in React, so prefer the URL form for everything else.