Using icons

Icons in Chonky

While reading Chonky's documentation, you might have noticed that some code examples define icons for various things. For example, a file object could specify a custom icon to override the default icon:

import { ChonkyIconName, FileData } from 'chonky';
const myFile: FileData = {
    id: 'zxc',
    name: 'My File.pdf',
    icon: ChonkyIconName.pdf, // <----
};

File action buttons can also specify icons:

import { ChonkyIconName, defineFileAction } from 'chonky';
const myAction = defineFileAction({
    id: 'my_action',
    button: {
        name: 'Run My Action',
        toolbar: true,
        icon: ChonkyIconName.flash, // <----
    },
});

The examples above use the ChonkyIconName enum. This enum defines a lot of common icon names. You can find the whole list in ChonkyIconName API reference.

Internally, Chonky's source code always uses this enum to specify icons. Unsurprisingly, Chonky's default icon component, ChonkyIconFA from the chonky-icon-fontawesome package, supports all of them. If you decide to provide a custom icon component, you should make sure it supports all of them too.

However, when it comes to defining custom icons, you are not limited to ChonkyIconName enum - you can use any other string or any object you want. Formally, the custom icon type you can use is:

type Icon = ChonkyIconName | string | any;

...which basically means you can use anything you want.

Defining a custom icon component

On Installation & usage page, you had to install a separate icon component and pass it to Chonky:

import { setChonkyDefaults } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';
setChonkyDefaults({ iconComponent: ChonkyIconFA });

As you probably guessed, you could pass any other component instead of ChonkyIconFA. The only catch is that your custom icon component should accept ChonkyIconProps:

export interface ChonkyIconProps {
    icon: ChonkyIconName | string;
    spin?: boolean;
    className?: string;
    fixedWidth?: boolean;
    style?: React.CSSProperties;
}

Consider this example - we want to define an icon that will support all standard Chonky icons, but also some emoji on top - a bento box 🍱, an angry face 😠, and... a map of Japan 🗾, why not? Here is how it would look like:

import { ChonkyIconProps } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';
import React from 'react';
const myEmojiMap: { [iconName: string]: string } = {
    bentoEmoji: '🍱',
    angryEmoji: '😠',
    japanEmoji: '🗾',
};
export const MyEmojiIcon: React.FC<ChonkyIconProps> = React.memo((props) => {
    const emojiIcon = myEmojiMap[props.icon];
    if (emojiIcon) {
        return <span>{emojiIcon}</span>;
    }
    return <ChonkyIconFA {...props} />;
});

Now, let's actually use this component with Chonky:

() => {
  const files = [
    { id: 'lht', name: 'Bento.hdf5', icon: 'bentoEmoji' },
    { id: 'zxc', name: 'Angry.face', icon: 'angryEmoji' },
    { id: 'gtr', name: 'Japan.jpn', icon: 'japanEmoji' },
  ]
  return (
    <div style={{ height: 300 }}>
      <FileBrowser files={files} iconComponent={MyEmojiIcon}>
        <FileNavbar />
        <FileToolbar />
        <FileList />
        <FileContextMenu />
      </FileBrowser>
    </div>
  )
}