@fabric-msft/visuals v0.0.6
@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 to use these illustrations 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"
/>
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago