mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
45 lines
1.3 KiB
Plaintext
45 lines
1.3 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import icons from '@data/icons.json'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
|
|
interface Props {
|
|
title?: string
|
|
type?: 'outline' | 'filled'
|
|
}
|
|
|
|
const { title, type = 'outline' } = Astro.props
|
|
|
|
// The dev server renders only the first 20 icons so the page stays fast;
|
|
// `astro build` (the zip package and production site) renders all of them.
|
|
const limit = import.meta.env.DEV ? 20 : Infinity
|
|
|
|
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">
|
|
<CardTitle>{title}</CardTitle>
|
|
</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} filled={type === 'filled'} />
|
|
</a>
|
|
),
|
|
)
|
|
}
|
|
{/* 21 empty divs (flexbox filler) */}
|
|
{Array.from({ length: 21 }).map(() => <div />)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|