troylusty.com/src/components/Skills.astro

---
import { getCollection } from "astro:content";
import { Icon } from "astro-icon/components";

const collection = await getCollection("skills");

const skills = await Promise.all(
  collection.map(async (item) => {
    const { Content } = await item.render();
    return { ...item, Content };
  }),
);
---

<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
  {
    skills.map((entry) => (
      <li class="flex items-center gap-2 rounded border border-tertiary p-2">
        <Icon
          name={entry.data.icon}
          title={entry.data.title}
          class="h-6 w-auto text-secondary"
        />
        <p class="m-0">{entry.data.title}</p>
      </li>
    ))
  }
</ul>