Server/frontend/src/lib/components/Icon.svelte

<script lang="ts">
  import Icon from "fa-svelte";

  export let name: IconName = "question";
  export let block: boolean = false;
  export let marginAutio: boolean = false;
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if block}
  <div class="icon-wrapper" on:click class:marginAutio>
    <Icon class="icon" icon={icons[name] || icons.question} />
  </div>
{:else}
  <Icon on:click class="icon" icon={icons[name] || icons.question} />
{/if}

<style>
  div.marginAutio {
    margin: auto;
  }
</style>

<script lang="ts" context="module">
  import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
  import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
  import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
  import { faArchive } from "@fortawesome/free-solid-svg-icons/faArchive";
  import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
  import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
  import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
  import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
  import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
  import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
  import { faHourglass } from "@fortawesome/free-solid-svg-icons/faHourglass";
  import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
  import { faExpand } from "@fortawesome/free-solid-svg-icons/faExpand";
  import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
  import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
  import { faThumbtack } from "@fortawesome/free-solid-svg-icons/faThumbtack";
  import { faHistory } from "@fortawesome/free-solid-svg-icons/faHistory";
  import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
  import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
  import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
  import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
  import { faTrash } from "@fortawesome/free-solid-svg-icons/faTrash";
  import { faCheckToSlot } from "@fortawesome/free-solid-svg-icons/faCheckToSlot";
  import { faEye } from "@fortawesome/free-solid-svg-icons/faEye";
  import { faList } from "@fortawesome/free-solid-svg-icons/faList";
  import { faPowerOff } from "@fortawesome/free-solid-svg-icons/faPowerOff";
  import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
  import { faTemperatureHalf } from "@fortawesome/free-solid-svg-icons/faTemperatureHalf";
  import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
  import { faSwatchbook } from "@fortawesome/free-solid-svg-icons/faSwatchbook";
  import { faCircleDot } from "@fortawesome/free-solid-svg-icons/faCircleDot";
  import { faMasksTheater } from "@fortawesome/free-solid-svg-icons/faMasksTheater";
  import { faTag } from "@fortawesome/free-solid-svg-icons/faTag";
  import { faFilter } from "@fortawesome/free-solid-svg-icons/faFilter";
  import { faSignature } from "@fortawesome/free-solid-svg-icons/faSignature";
  import { faAsterisk } from "@fortawesome/free-solid-svg-icons/faAsterisk";
  import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
  import { faClockRotateLeft } from "@fortawesome/free-solid-svg-icons/faClockRotateLeft";
  import { faNoteSticky } from "@fortawesome/free-solid-svg-icons/faNoteSticky";
  

  const icons = {
    "clock": faClock,
    "thumbtack": faThumbtack,
    "history": faHistory,
    "question": faQuestion,
    "plus": faPlus,
    "pen": faPen,
    "archive": faArchive,
    "check": faCheck,
    "cog": faCog,
    "link": faLink,
    "star": faStar,
    "times": faTimes,
    "lightbulb": faLightbulb,
    "spinner": faSpinner,
    "hourglass": faHourglass,
    "calendar": faCalendar,
    "expand": faExpand,
    "search": faSearch,
    "chevron_right": faChevronRight,
    "chevron_down": faChevronDown,
    "chevron_up": faChevronUp,
    "trash": faTrash,
    "check_slot": faCheckToSlot,
    "eye": faEye,
    "list": faList,
    "power": faPowerOff,
    "cirlce_notch": faCircleNotch,
    "temperature_half": faTemperatureHalf,
    "palette": faPalette,
    "swatch_book": faSwatchbook,
    "circle_dot": faCircleDot,
    "masks_theater": faMasksTheater,
    "tag": faTag,
    "filter": faFilter,
    "signature": faSignature,
    "asterisk": faAsterisk,
    "play": faPlay,
    "clock_rotate_left": faClockRotateLeft,
    "note_sticky": faNoteSticky,
  };

  export type IconName = keyof typeof icons;

  export const iconNames = Object.keys(icons).sort() as IconName[];
  export const DEFAULT_ICON: IconName = "question";
</script>