How to make a custom field for an icon library?

I want to integrate Lucide-icons into payloadcms.

To do this I want a autofill or searchable select field which shows the name and a preview of the icon from the lucide-icons icon pack.

It seems like this should be possible, but I'm not sure how to implement it. Are there any ready made examples of icon fields that integrate with icon packs?

Looks like a good starting point!

I'm just not sure how to build the custom component so that the select field autopopulates options with the lucide icon names.

I hope someone ends up making a plugin for such a field... If not I might give it a try soon™

Wow, that was a fast demonstration! Thanks a bunch!

I'll give it a try

how did you get lucide.icons added to the window variable btw?

I managed to get the select up, now I just need to make the value a combination of a SVG and the name of the icon

Implementation 👇

import { Field } from 'payload/types';
import { Option } from 'payload/dist/fields/config/types';
import deepMerge from '../utilities/deepMerge';
import { createIcons, icons } from 'lucide';

export function generateLucideIconOptions(): Option[] {
  const lucideIconOptions: Option[] = [];
  Object.keys(icons).forEach((icon) => {
    lucideIconOptions.push({
      label: icon,
      value: icon,
    });
  });
  console.debug('lucideIconOptions', lucideIconOptions);
  return lucideIconOptions;
}

export function lucideIcon({ overrides = {} } = {}): Field {
  const lucideIcon: Field = {
    name: 'lucideIcon',
    type: 'select',
    options: generateLucideIconOptions(),
  };
  return deepMerge(lucideIcon, overrides);
}

Usage 👇

import { CollectionConfig } from 'payload/types';
import { lucideIcon } from '../fields/lucideIcon';

export const Icons: CollectionConfig = {
  slug: 'icons',
  labels: {
    singular: 'Icon',
    plural: 'Icons',
  },
  fields: [lucideIcon()],
};

Good idea!

Thanks for all the help

Do you still have time to help with the ui field implementation?

I haven't messed around with ui fields yet, so not sure where to start

The documentation is a bit scarce:

Great, thanks!

So I've figured out that I need to create a Custom Component Field.

My idea is that I can just copy the one used for

, and allow the addition of this type as an option:

export type OptionObjectWithIcon = {
  label: Record<string, string> | string;
  value: string;
  icon: string; // svg code as a string
};

Then if the type is

I'll just render the svg inside the select's option

I have no idea how to do it in practice though, so I've been trying to get ChatGPT to do it for me to no avail:

They have a custom select? 😮

The built in select field is of type

:

export type OptionObject = {
    label: Record<string, string> | string;
    value: string;
};
export type Option = OptionObject | string;
export type SelectField = FieldBase & {
    type: 'select';
    options: Option[];
    hasMany?: boolean;
    admin?: Admin & {
        isClearable?: boolean;
        isSortable?: boolean;
    };
};

Agreed, but if we can just override the original one so that it accepts my type (

) as an option, and renders the SVG if

is not empty I think that would be better since we hopefully keep the same styling instead of having to re-style a new component

I get this error:

[15:29:35] ERROR (payload): There were 1 errors validating your Payload config
[15:29:35] ERROR (payload): 1: Collection "products" > Field "categories" > "value" does not match any of the allowed types   
[nodemon] app crashed - waiting for file changes before starting...

not sure why though

I can share all the relevant files if you want

Folder structure in attached image for reference

I'm not even sure I'm trying to get the value anywhere

Don't feel the urge to respond right away, but I'll just post this while I still remember it 😛

I think it's complaining about the value inside categoriesOptions here:

// collections/Products.ts

import { CollectionConfig } from 'payload/types';
import CustomSelectFieldWithIcon, {
  OptionObjectWithIcon,
} from '../fields/selectFieldWithIcon'; // Adjust the path if needed

// Define the options for the Categories field as custom OptionObject[] type
const categoriesOptions: OptionObjectWithIcon[] = [
  {
    label: {
      en: 'Electronics',
      fr: 'Électronique', // You can include labels for other languages as well
    },
    value: 'electronics',
    icon: '<svg>...</svg>', // Replace with your SVG icon as a string
  },
  {
    label: {
      en: 'Clothing',
      fr: 'Vêtements',
    },
    value: 'clothing',
    icon: '<svg>...</svg>',
  },
  // Add more options as needed
];

export const Products: CollectionConfig = {
  slug: 'products',
  fields: [
    // Your other fields...
    {
      name: 'categories',
      label: 'Categories',
      type: 'select',
      options: categoriesOptions, // Use the custom OptionObject type for options
      admin: {
        // Optional admin configuration
        components: {
          Field: CustomSelectFieldWithIcon, // Use the custom field component
        },
      },
    },
    // Your other fields...
  ],
};

This is what I have working^

I want to add an icon for each select option. How do I do that?

Oooo, nice! Gonna try it out ASAP

I see. That example was great since it taught me which "components" I need to make to create a custom component and make use of it

I'm wondering how I can pass parameters to the index.tsx file though. So that I can choose the

content myself

I'm not really experienced with React btw.

So please let me know if I'm asking questions about React and not Payload 🙂

This is what I get when I run the example code btw:

How do I pass in the props though? Is there any documentation on that?

like this?

export function CustomSelect({
  path,
  options = ['icon-1', 'icon-2'],
}): React.FC<any> {
  return (
    <div>
      <Select path={path} name={path} options={options} />
      <RenderIcon path={path} />
    </div>
  );
}

The props to the CustomSelect function

Alright, I think I kinda understand. I'll try for a bit and get back to you if I'm completely stuck.

Thanks a lot for the help!

Shouldn't this work?

import { Field } from 'payload/types';
import { Option } from 'payload/dist/fields/config/types';
import { createIcons, icons } from 'lucide';
import { CustomSelect } from './CustomSelect';

export function generateLucideIconOptions(): Option[] {
  const lucideIconOptions: Option[] = [];
  Object.keys(icons).forEach((icon) => {
    lucideIconOptions.push({
      label: icon,
      value: icon,
    });
  });
  return lucideIconOptions;
}

export const IconSelectorField: Field = {
  name: 'lucidIcon',
  type: 'text',
  admin: {
    components: {
      Field: CustomSelect({ options: generateLucideIconOptions() }),
    },
  },
};

^

It happens when my CustomSelect code is like this

If I change it to this I get a different error

I made it!

Not as generic as I'd wanted, but I finally made it work

My implementation:

Thank you both chris and Jarrod for the help!

Result:

No, I sadly didn't make one. Maybe a image to text service can be used to get the code though?

Feel free to make a gist if you'd like. Consider the code open-sourced 🙂

Awesome!

If it's not too much to ask, could you upload some screenshots of how it looks? 🙂