Introduction

Hi everyone, this is part 13 of PnP React Controls Series. This post will explain the usage of the PnP IconPicker control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful when you would like to display a pictorial representation. Usually we go for images and there are some drawbacks using these images. There should be a common place to store all the images, permission to access, image size to be very minimal to increase the page load, clarity of the image and the most important is the copyright of the image. To avoid the above issues and to make our life easier, Office UI Fabric has so many icons which we make use of it to replace the images and also to overcome the constraints mentioned above. There are few advantages of using icons

• Loading time is very low compared to the image
• No need a separate repo to store the icons
• Very easy to display the icon of various sizes and color without have to manually change it. Also, the color can be matched to the site theme color.
• The icons are rendered as unified code and the entire icon file size is in KB, so there is no need to worry about the size.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named iconPickerDemo. Below is the IFrameDemo.tsx file.

import * as React from 'react';
import styles from './IconPickerDemo.module.scss';
import { IIconPickerDemoProps } from './IIconPickerDemoProps';
import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
import { FontIcon } from '@fluentui/react/lib/Icon';
import { mergeStyles } from '@fluentui/react/lib/Styling';

const panelIconClass = mergeStyles({
    fontSize: 50
});
const dialogIconClass = mergeStyles({
    fontSize: 50,
    color: 'Orange'
});

const IconPickerDemo: React.FC<IIconPickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [panelIcon, setPanelIcon] = React.useState<string>(undefined);
    const [dialogIcon, setDialogIcon] = React.useState<string>(undefined);

    return (
        <section className={`${styles.iconPickerDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
            </div>
            <div style={{textAlign: 'center'}}>
                <h3>PnP Icon Picker Demo</h3>
                <p>
                    <IconPicker buttonLabel={'Select Icon using panel'}
                        onSave={(iconName: string) => { setPanelIcon(iconName); }} />
                    {panelIcon &&
                        <p>
                            Selected Icon: <FontIcon iconName={panelIcon} className={panelIconClass} />
                        </p>
                    }
                </p>
                <p>
                    <IconPicker buttonLabel={'Select Icon using dialog'} renderOption={'dialog'}
                        onSave={(iconName: string) => { setDialogIcon(iconName); }} />
                    {panelIcon &&
                        <p>
                            Selected Icon: <FontIcon iconName={dialogIcon} className={dialogIconClass} />
                        </p>
                    }
                </p>
            </div>
        </section>
    );
}

export default IconPickerDemo;

Below are the updates done to the file.

• Changed the class component to the react hooks
• Created 2 state variables to hold the iconnames when it is selected using panel and dialog of icons.
• Following are some of the properties of the control that allows us to customize based on our requirement
  • buttonLabel – Button text to be displayed for opening the icon list.
  • onSave – Method to be triggered once the icon is selected and the save button is clicked.
  • renderOption – To open the list of icons either in a panel or dialog.
  • currentIcon – default icon to be selected when opening the icon list
  • useStartsWithSearch – Whether to use the starts with for filtering else it will search the whole word.

Reference URL

IconPicker – @pnp/spfx-controls-react

Fluent UI Icons

Flicon

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…