SharePoint 2013 Hosting – HostForLIFE :: How To Use Fluent UI Icons In SPFx Web Part?

In this blog, we will learn how can we use the icons of fluent UI in SPFx Web parts or SPFx Extensions.

Here are the steps to use fluent UI icons:

Steps to use fluent UI in SPFx Web parts/Extensions

Step 1

To use the fluent UI icons, first we need to install the package for fluent UI using below command.

npm i @fluentui<span class="token operator">/</span>react

1	npm i @fluentui<span class="token operator">/</span>react

Step 2

Now, we need to import Icons and Iconsprops as given below:

import <span class="token punctuation">{</span> Icon <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> '@fluentui<span class="token operator">/</span>react<span class="token operator">/</span>lib<span class="token operator">/</span>Icon'<span class="token punctuation">;</span>

import { Icon } from '@fluentui/react/lib/Icon';

Step 3

Now, declare the global variable and assign the icon as given in below code. Here we are using global variable so we can use this icon multiple times.

<span class="token keyword keyword-const">const</span> HomeIcon <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span><span class="token class-name">Icon</span> iconName<span class="token operator">=</span><span class="token string">"Home"</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>

const HomeIcon = () => <Icon iconName="Home" />;

Step 4

Now, in render method we can render the icon as given below:

<span class="token operator">&lt;</span>HomeIcon<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>HomeIcon<span class="token operator">&gt;</span>

1	<span class="token operator"><</span>HomeIcon<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>HomeIcon<span class="token operator">></span>

Here is the full code snippet,

import <span class="token operator">*</span> <span class="token keyword keyword-as">as</span> <span class="token class-name">React</span> <span class="token keyword keyword-from">from</span> 'react'<span class="token punctuation">;</span>
import <span class="token punctuation">{</span> IAlertsProps <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> '<span class="token punctuation">.</span><span class="token operator">/</span>IAlertsProps'<span class="token punctuation">;</span>
import styles <span class="token keyword keyword-from">from</span> '<span class="token punctuation">.</span><span class="token operator">/</span>Alerts<span class="token punctuation">.</span>module<span class="token punctuation">.</span>scss'<span class="token punctuation">;</span>
import <span class="token punctuation">{</span> escape <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> '@microsoft<span class="token operator">/</span>sp<span class="token operator">-</span>lodash<span class="token operator">-</span>subset'<span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Icon <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">"@fluentui/react"</span><span class="token punctuation">;</span>
<span class="token keyword keyword-const">const</span> HomeIcon <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span><span class="token class-name">Icon</span> iconName<span class="token operator">=</span><span class="token string">"Home"</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
export <span class="token keyword keyword-default">default</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">Alerts</span> <span class="token return-type class-name">extends</span> React<span class="token punctuation">.</span>Component<span class="token operator">&lt;</span>IAlertsProps<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
 <span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> React<span class="token punctuation">.</span>ReactElement<span class="token operator">&lt;</span>IAlertsProps<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-return">return</span> <span class="token punctuation">(</span>
   <span class="token operator">&lt;</span><span class="token class-name">div</span> className<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>Alerts<span class="token punctuation">}</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>HomeIcon<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>HomeIcon<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import * as React from 'react';

import { IAlertsProps } from './IAlertsProps';

import styles from './Alerts.module.scss';

import { escape } from '@microsoft/sp-lodash-subset';

import { Icon } from "@fluentui/react";

export default class Alerts extends React.Component<IAlertsProps, {}> {

public render(): React.ReactElement<IAlertsProps> {

return (

</div>

);

}

It will display the Home icon on your web part.

Conclusion

This is how we can use fluent UI icons in SPFx web parts or Extensions. Hope this blog will be helpful for you!

SharePoint 2013 Hosting – HostForLIFE :: How To Use Fluent UI Icons In SPFx Web Part?

Steps to use fluent UI in SPFx Web parts/Extensions

Conclusion

BLOGROLL

Featured On

SharePoint 2013 Hosting – HostForLIFE :: How To Use Fluent UI Icons In SPFx Web Part?

Steps to use fluent UI in SPFx Web parts/Extensions

Conclusion

BLOGROLL

Featured On

Tags