Creating an SPFx Web Part for an App Icon Grid Using Fluent UI

Here’s a technical article that will guide readers through creating a custom SharePoint Framework (SPFx) Web Part that displays a grid of app icons using Fluent UI components. The article explains each step, from setting up the project to implementing the layout with Stack and Fluent UI icons.

Creating an SPFx Web Part for an App Icon Grid Using Fluent UI

In this tutorial, we’ll build a SharePoint Framework (SPFx) Web Part that displays a grid of app icons using Fluent UI. This Web Part is designed to present icons in a responsive layout, ideal for showing multiple app shortcuts on a SharePoint page.

Prerequisites

Ensure you have the following installed:

Node.js: Install the latest LTS version from nodejs.org.
Yeoman and SPFx Generator: Run npm install -g yo @microsoft/generator-sharepoint.
Code Editor: We recommend Visual Studio Code.

Step 1: Set Up the SPFx Project

Open a terminal or command prompt and navigate to your projects directory. Use the SPFx generator to create a new Web Part project:

yo @microsoft/sharepoint

Provide the following options when prompted:

What is your solution name? IconGridWebPart
Which baseline package do you want to target? SharePoint Online only (latest)
What type of client-side component to create? WebPart
What is your Web part name? IconGrid
Which template would you like to use? React

Navigate to the project folder:

cd IconGridWebPart

Step 2: Install Fluent UI

To use Fluent UI for styling and icons, install the Fluent UI package:

npm install @fluentui/react

Step 3: Create the App Icon Component

In your project’s src/webparts/iconGrid/components directory, create a new file named AppIcon.tsx. This component will render each app icon in the grid.

AppIcon.tsx

import * as React from 'react';
import { Icon } from '@fluentui/react/lib/Icon';
import { Link } from '@fluentui/react/lib/Link';

interface AppIconProps {
  iconName: string;
  title: string;
  url: string;
}

const AppIcon: React.FC<AppIconProps> = ({ iconName, title, url }) => (
  <div style={{ textAlign: 'center', width: 100, margin: 10 }}>
    <Link href={url} target="_blank" aria-label={title} style={{ textDecoration: 'none' }}>
      <Icon iconName={iconName} style={{ fontSize: 50, color: '#0078d4' }} />
      <div style={{ fontSize: 12, marginTop: 5 }}>{title}</div>
    </Link>
  </div>
);

export default AppIcon;

Explanation:

The AppIcon component takes three props: iconName, title, and url.
Each icon is clickable and opens a link to the specified URL in a new tab.

Step 4: Create the Icon Grid Component

Now, let’s create a component that organizes multiple AppIcon components in a responsive grid layout.

AppGrid.tsx

In src/webparts/iconGrid/components, create AppGrid.tsx:

import * as React from 'react';
import AppIcon from './AppIcon';
import { Stack, IStackTokens, IStackStyles } from '@fluentui/react';

const apps = [
  { iconName: 'Mail', title: 'Mail', url: 'https://outlook.office.com' },
  { iconName: 'WordLogo', title: 'Word', url: 'https://office.com/word' },
  { iconName: 'ExcelLogo', title: 'Excel', url: 'https://office.com/excel' },
  { iconName: 'PowerPointLogo', title: 'PowerPoint', url: 'https://office.com/powerpoint' },
  { iconName: 'OneNoteLogo', title: 'OneNote', url: 'https://office.com/onenote' },
  { iconName: 'TeamsLogo', title: 'Teams', url: 'https://teams.microsoft.com' },
  { iconName: 'PlannerLogo', title: 'Planner', url: 'https://tasks.office.com' },
  { iconName: 'OneDrive', title: 'OneDrive', url: 'https://onedrive.live.com' },
  { iconName: 'Calendar', title: 'Calendar', url: 'https://outlook.office.com/calendar' },
  { iconName: 'Tasks', title: 'Tasks', url: 'https://to-do.office.com' },
  { iconName: 'FormsLogo', title: 'Forms', url: 'https://forms.office.com' },
  { iconName: 'YammerLogo', title: 'Yammer', url: 'https://yammer.com' },
  { iconName: 'StreamLogo', title: 'Stream', url: 'https://web.microsoftstream.com' },
  { iconName: 'SwayLogo', title: 'Sway', url: 'https://sway.office.com' },
  { iconName: 'SharePointLogo', title: 'SharePoint', url: 'https://sharepoint.com' },
  { iconName: 'SkypeLogo', title: 'Skype', url: 'https://skype.com' },
];

const stackTokens: IStackTokens = { childrenGap: 10 };
const stackStyles: IStackStyles = {
  root: { width: '100%', justifyContent: 'center', padding: 10 },
};

const AppGrid: React.FC = () => {
  return (
    <Stack styles={stackStyles} tokens={stackTokens}>
      <Stack horizontal wrap horizontalAlign="center" tokens={stackTokens}>
        {apps.map((app, index) => (
          <AppIcon key={index} iconName={app.iconName} title={app.title} url={app.url} />
        ))}
      </Stack>
    </Stack>
  );
};

export default AppGrid;

Explanation:

The AppGrid component renders a grid of app icons using two Stack components:
An outer Stack for centering.
An inner Stack with horizontal and wrap properties to arrange the icons in two rows of eight.

Step 5: Update the Web Part to Use `AppGrid`

In src/webparts/iconGrid/IconGridWebPart.ts, replace the render method to include the AppGrid component.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import AppGrid from './components/AppGrid';

export interface IIconGridWebPartProps {}

export default class IconGridWebPart extends BaseClientSideWebPart<IIconGridWebPartProps> {
  public render(): void {
    const element = React.createElement(AppGrid);
    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: []
    };
  }
}

Step 6: Build and Test the Web Part

Run the following command to bundle the Web Part:

   gulp serve

Open the SharePoint Workbench to test the Web Part.

Summary

You’ve now created a responsive grid of app icons for SharePoint using SPFx and Fluent UI. This Web Part is a clean, customizable way to showcase app links, and the Fluent UI Stack component ensures a well-aligned, adaptive layout