Skip to content

Files

Latest commit

9a5e513 · Jan 29, 2024

History

History

use-icons

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Jan 29, 2024
May 12, 2022

useIcon & useIcons

The useIcon and useIcons hooks allows you to easily get any registered icons. With useIcon you need to provide the name of the iconSet and the name of the icon and you get the icon object in return.

The useIcons hook on the other hand allows you to either get all available icons of all iconSets, or allows you to pass in the name of the iconSet you want and then only returns you an array containing all the icons within that iconSet.

Usage

import { useIcon } from '@10up/block-components';

function BlockEdit(props) {
    const { attributes } = props;
    const { iconName, iconSet } = attributes;

    const icon = useIcon( iconSet, iconName );

    return ( 
        <div dangerouslySetInnerHTML={{ __html: icon.source }} />
    );
}

Note: Instead of using the useIcon hook it is recommended to use the Icon Component which uses the useIcon hook under the hood.