---
import icons from '@data/icons.json'

interface Props {
  name: string
  type?: 'outline' | 'filled'
  class?: string
  color?: string
  size?: string
  inline?: boolean
}

const { name, type = 'outline', class: className, color, size, inline } = Astro.props

const icon = (icons as unknown as Record<string, { svg: Record<string, string> }>)[name]

const classes = ['icon', className, color && `text-${color}`, inline && 'icon-inline', size && `icon-${size}`].filter(Boolean).join(' ')

let svg = icon?.svg?.[type] ?? ''
svg = svg.replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
svg = svg.replace(/class="[^"]+"/, `aria-hidden="true" focusable="false" class="${classes}"`)
---

{icon && <Fragment set:html={`<!-- Download SVG icon from http://tabler.io/icons/icon/${name} -->\n\t${svg}`} />}