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

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

  export let value: IconName;
  export let disabled: boolean;
</script>

<div class:disabled class="icon-select">
  {#each iconNames as iconName (iconName)}
    <div class="icon-item" class:selected={value===iconName} on:click={() => {if (!disabled) { value = iconName }}}>
      <Icon name={iconName} />
    </div>
  {/each}
</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;
}
</style>