Dynamically render icons

[telmogoncalves]

I'm trying to dynamically render icons but it's not really working, here's an example of the data I get from my database:

[
  {
    "id": "_lxERtUe-mUv",
    "icon": "icon-solar-album-line-duotone"
  },
  {
    "id": "QNM5dXhVokWH",
    "icon": "icon-solar-mailbox-line-duotone"
  },
  {
    "id": "LOmrIBC2FvVJ",
    "icon": "icon-solar-magnet-wave-line-duotone"
  },
  {
    "id": "qk_D2CedI-XV",
    "icon": "icon-solar-bug-broken"
  }
]

Then I try to render it:

{#each data as { icon }}
  <div>
    <span class="{icon} w-6 h-6" />
  </div>
{/each}

I've tried to render these icons outside the #each block and it works fine.

[hyoban]

According to https://tailwindcss.com/docs/content-configuration#dynamic-class-names, you cannot dynamically render icons obtained from the database unless all possibilities are told to tailwind in advance

[telmogoncalves]

That's a bummer 🥲 Thanks @hyoban