@fabric-msft/visuals

Empty state illustrations for Microsoft Fabric.

To use these illustrations, import the package into your project, then use individual SVG files as an image source or as an SVG.

Typical use case is as a visual aid for empty states in your application. For example, when a user has no data, you can display an empty state illustration to help them understand what to do next.

These visuals can be implemented a number of ways:

Implement as React Component

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

function App() {
  return (
    <div>
      <EsAddItem100 />
    </div>
  );
}

export default App;

Since each SVG is its own React component, the impact on bundle size and runtime performance should be minimal when importing only the icons you need. However, for a very large number of icons, consider dynamic imports or other strategies to further optimize performance.

Direct File Import (Context: Vite)

import React from "react";
import EsAddItem100 from "@fabric-msft/visuals/dist/svg/es_add_item_100.svg?react";

const Component = () => {
  return <EsAddItem100 />;
};

Using a Path

<img
  src="node_modules/@fabric-msft/visuals/dist/svg/es_add_item_100.svg"
  alt="Add item illustration"
/>