[Question]: Can I set my own Icons?

[alinianitchii]

Hi,

I would like to set my own Icons I'm using in my system.

Can adapt the library to accept other Icons?

Thank you

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[Rahuletto]

Yes, but no at the same time. React CMDK supports React-Icons library and HeroIcons. So you can't use ur selected library but you can do it using react-icons package. If that package doesn't support your desired icons, you are screwed.

[ahmadassaf]

You can use whatever you want by overriding how the <CommandPalette.ListItem> is rendered.

For example; I want to show some social icons from react-icons/pi (can be any source or direct svg)

import { PiLinkedinLogo } from 'react-icons/pi';

  const socialItems = filterItems(
    [
      {
        'heading': 'Contact Me',
        'id': 'contact',
        'items': [
          {
            'children': 'Linkedin',
            'closeOnSelect': false,
            'heroIcon': <PiLinkedinLogo/>,
            'id': 'linkedin',
            'onClick': () => {
              window.open('https://linkedin.com/in/.....', '_blank').focus();
            },
            'title': 'My Linkedin Profile'
          },
          .....

then when you are specifying your list:

          <CommandPalette.List key={ list.id } heading={ list.heading }>
            {list.items.map(({ id, title, heroIcon, ...rest }) => (
              <CommandPalette.ListItem
                key={ id }
                index={ getItemIndex(socialItems, id) }
                { ...rest }
              >
                <div className='flex items-center w-full'>
                  {heroIcon}
                  <div className='mx-2 text-md'>{ title }</div>
                </div>
              </CommandPalette.ListItem>
            ))}
          </CommandPalette.List>