tabler/shared/components/cards/Icons.astro

---
import Icon from '@ui/Icon.astro'
import icons from '@data/icons.json'

interface Props {
  title?: string
  type?: 'outline' | 'filled'
}

const { title, type = 'outline' } = Astro.props

// Dev preview limits icons to 20 (see BaseLayout).
const limit = 20

const entries = Object.entries(icons as Record<string, { svg?: Record<string, string | null> }>)
  .filter(([, icon]) => icon.svg?.[type])
  .slice(0, limit)
---

<div class="card">
  <div class="card-header">
    <h3 class="card-title">{title}</h3>
  </div>
  <div class="card-body p-0">
    <div class="demo-icons-list-wrap">
      <div class="demo-icons-list">
        {
          entries.map(
            ([iconName, icon]) =>
              icon.svg?.[type] && (
                <a href={`https://tabler.io/icons/icon/${iconName}`} target="_blank" rel="noopener" class="demo-icons-list-item" title={iconName} data-bs-toggle="tooltip" data-bs-placement="top">
                  <Icon name={iconName} type={type} />
                </a>
              ),
          )
        }
        {/* 21 empty divs (flexbox filler) */}
        {Array.from({ length: 21 }).map(() => <div />)}
      </div>
    </div>
  </div>
</div>