stufflog2/svelte-ui/src/components/IconSelect.svelte

<script lang="ts">
  import { commonIcons, uncommonIcons } from "../external/icons";
  import type { IconName } from "../external/icons";
  import Icon from "./Icon.svelte";

  export let value: IconName;
  export let disabled: boolean;

  let showAll = !commonIcons.includes(value);

  function toggleShowAll() {
    showAll = !showAll;
  }
</script>

<div class:disabled class="icon-select">
  {#each commonIcons as iconName (iconName)}
    <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
      <Icon name={iconName} />
    </div>
  {/each}
  <div class="show-all" on:click={toggleShowAll}>
    { showAll ? "Hide uncommon icons" : "Show uncommon icons" }
  </div>
  {#if showAll}
    {#each uncommonIcons as iconName (iconName)}
      <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
        <Icon name={iconName} />
      </div>
    {/each}
  {/if}
</div>

<style>
div.icon-select {
  background: #222;
  margin: 0;
  padding: 0;
  border-radius: 0.05em;
  margin-bottom: 0.5em;
}

div.icon-select.disabled {
  background: #444;
}

div.icon-item {
  display: inline-block;
  box-sizing: border-box;
  width: calc(100% / 8);
  padding: 0.35em 0 0.25em 0;
  text-align: center;

  cursor: pointer;
}
div.icon-item:hover {
  background-color: #292929;
}
div.icon-item.selected {
  background-color: rgb(18, 63, 75);
}
div.icon-item.selected:hover {
  background-color: rgb(24, 83, 99);
}
div.icon-select.disabled > div.icon-item {
  background-color: #444;
  cursor: default;
}
div.icon-select.disabled > div.icon-item.selected {
  background-color: #555;
}

div.show-all {
  color: #777;
  cursor: pointer;
  text-align: center;
  padding: 0.25em 0;
}
div.show-all:hover {
  color: #ccc;
  background-color: #2c2c2c;
}
</style>