Best practices when using icon libraries in config files

[grave talon]

Hey everyone,
I've just started a new payload project and want to let my user choose from the icons from lucide.dev

I'm uncertain how to set this up and wanted to check if there is a best pratice for this in payload.

My ininital though was doing something like:

{
  name: 'icon',
  type: 'select',
  options: [
    'AlertCircle',
    'ArrowRight',
    'Check',
    'ChevronDown',
    'CreditCard',
    'DollarSign',
    'ShoppingBag',
    'ShoppingCart',
    // Add more icon names as needed
  ],
},```

and then in the component:

```tsx
import type { Page } from '@/payload-types'
import * as LucideIcons from 'lucide-react'

export default function HomePage(props: Page) {
  const { title, description, offers } = props

  return (
    <div>
      {offers?.map((offer, i) => {
        // Dynamically get icon component
        const IconComponent = LucideIcons[offer.icon as keyof typeof LucideIcons]
        
        return (
          <div key={i}>
            <h3>{offer.title}</h3>
            {IconComponent && <IconComponent size={24} />}
          </div>
        )
      })}
    </div>
  )
} ```

This seems tedious and there would be no way to preview the icon to the user

[vagrant tulip]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Blocks Field - Block Configs
• Global Configs - Config Options
• Collection Configs - Config Options
• Migrations - When to run migrations - Postgres
• Adding your own Queries and Mutations - Best practices

[paper lion]

Ahh, I don't think that would actually work. Giant icon libraries that are available to end users are not so simple. The easiest path forward is to create a media collection that includes these icons and just proceed as you would with a typical media collection.

This has a nice benefit of not requiring a redeploy every time an icon changes

In addition, it removes the burden of complicated dynamic imports that would otherwise make it difficult to work with

As for doign things dynamically with those icons, nothing is stopping you from reading the .svg files natively, and doing your manipulation

[grave talon]

Great input! I’ll cook with that!