Icon picker for Sanity which let you select icons from a set of icon providers.

sanity install icon-picker

{
    title: "Icon",
    name: "icon",
    type: "iconPicker"
}

Define which icon providers you want to use by providing their provider id in the providers array. If not defined, the Icon Picker defaults to display all providers and icons.

{
    title: "Icon",
    name: "icon",
    type: "iconPicker",
    options: {
        providers: ["f7", "fa", "mdi", "sa", "hi", "fi"]
    }
}

Format the output data in accordance with your front-end project. If you're using React you can set the outputFormat to react. If you ommit this option, the output format will be in accordance with every single provider's icon naming convention.

{
    title: "Icon",
    name: "icon",
    type: "iconPicker",
    options: {
        outputFormat: 'react',
    }
}

Filter out a subset of icons to be used by specifying a filter. A filter can be either an exact match of a string (case insensitive) or a regular expression. Supports both the react naming convention of an icon name as well as default naming conventions for each icon provider. This means that defining for instance the Font Awesome icon arrow-circle-up is equal to defining the react version FaArrowCircleUp.

{
    title: "Icon",
    name: "icon",
    type: "iconPicker",
    options: {
        filter: ['FaBeer', 'FaDocker', /^arrow/i],
    }
}

In order to render the icon component as preview media, we can import a helper method.

import preview from "part:sanity-plugin-icon-picker/preview";

We can then render the icon by passing the selected name and provider to this method which will return an icon component.

{
...
    preview: {
        select: {
          provider: "icon.provider",
          name: "icon.name",
        },
        prepare(icon) {
          return {
            title: icon.provider,
            subtitle: icon.name,
            media: preview(icon),
          };
        },
      }
}

MIT © Christopher Af Bjur See LICENSE