Icon.astro

---
import BellIcon from "./BellIcon.astro";
import DownChevronIcon from "./DownChevronIcon.astro";
import LeftChevronIcon from "./LeftChevronIcon.astro";
import MobileMenuIcon from "./MobileMenuIcon.astro";
import MoonIcon from "./MoonIcon.astro";
import RightChevronIcon from "./RightChevronIcon.astro";
import SearchIcon from "./SearchIcon.astro";

const { name, title, size } = Astro.props;
---
<>
  {
    {
      'address-card':
        <span class="bg-gray-700 py-1 px-2 rounded"><i class="fa-address-card fas text-white" {title} /></span>,
      'badge':
        <i class="fa-id-badge fas text-blue-700" {title} />, //todo new icon
      'bell':
        <BellIcon/>,
      'code':
        <span class="bg-blue-900 py-1 px-2 rounded"><i class="fas fa-code text-white" {title}/></span>,
      'cogs':
        <i class="fa-cogs fas" {title}/>, //todo new icon
      'copy':
        <span class="bg-gray-700 py-1 px-2 rounded"><i class="fa-copy fas text-white" {title}/></span>,
      'chevron-up':
        <i class="fa-chevron-up fa-solid text-slate-900 dark:text-white"/>,
      'chevron-down':
        <i class:list={["fa-chevron-down fa-solid text-slate-900 dark:text-white", size]}/>,
      'chevron-right':
        <i class:list={["fa-chevron-right fa-solid text-slate-900 dark:text-white", size]}/>,
      'down-chevron':
        <DownChevronIcon/>,
      'edit':
        <span class="bg-blue-500 py-1 px-2 rounded"><i class="fa-edit fas text-white" {title}/></span>,
      'exchange':
        <span class="bg-gray-800 py-1 px-2 rounded"><i class="fa-exchange fas fa-Test button ui-button purple text-white" {title}/></span>,
      'fa-search':
        <span class="bg-green-500 py-1 px-2 rounded"><i class="fa-search fas text-white" {title}/></span>,
      'key':
        <span class="bg-gray-700 py-1 px-2 rounded"><i class="fa-key fas text-white" {title}/></span>,
      'left-chevron':
        <LeftChevronIcon/>,
      'lock':
        <i class="fa-lock fas text-red-800"/>, //todo new icon
      'lock-button':
        <span class="bg-red-700 py-1 px-2 rounded"><i class="fa-lock fas text-white" {title}/></span>,
      'minus-circle':
        <span class="bg-orange-400 py-1 px-2 rounded"><i class="fa-minus-circle fas text-white" {title}/></span>,
      'minus-circle-red':
        <span class="bg-red-500 py-1 px-2 rounded"><i class="fa-minus-circle fas text-white" {title} /></span>,
      'mobile-menu':
        <MobileMenuIcon/>,
      'moon':
        <MoonIcon/>,
      'passport':
        <i class="fa-passport fas text-blue-700" {title}/>, //todo new icon
      'passport-red':
        <i class="fa-passport fas text-red-700" {title}/>, //todo new icon
      'plus':
        <span class="bg-green-700 py-1 px-2 rounded"><i class="fa-plus fas text-white" {title} /></span>,
      'plus-circle':
        <span class="bg-blue-500 py-1 px-2 rounded"><i class="fa-plus-circle fas text-white" {title}></i></span>,
      'right-chevron':
        <RightChevronIcon/>,
      'save':
        <span class="bg-blue-500 py-1 px-2 rounded"><i class="fa-save fas text-white" {title}/></span>,
      'search':
        <SearchIcon/>,
      'search-small':
        <SearchIcon size="small"/>,
      'server':
        <i class="fa-server fas text-green-700" {title}/>,
      'shield':
        <i class="fa-solid fa-shield-halved text-red-700" {title}/>, //todo new icon
      'unlock':
        <i class="fa-unlock fas text-green-700" {title}/>,// todo new icon
      'unlock-button':
        <span class="bg-green-700 py-1 px-2 rounded"><i class="fa-unlock fas text-white" {title}/></span>,// todo new icon
      'trash':
        <span class="bg-red-700 py-1 px-2 rounded"><i class="fa-trash fas text-white" {title}/></span>,
      'trophy':
        <i class="fa-trophy fal" {title}/>,
      'user':
        <span class="bg-blue-900 py-1 px-2 rounded"><i class="fas fa-user text-white" {title}/></span>, // todo new icon
      'undo':
        <span class="bg-blue-900 py-1 px-2 rounded"><i class="fas fa-undo text-white" {title}/></span>, // todo new icon
      'x':
        <span class="bg-red-500 py-1 px-2 rounded"><i class="fas fa-times text-white" {title}/></span>,
    }[name]
  }
</>