stufflog/svelte-ui/src/components/ActivityIconSelect.svelte

<script>
  import ActivityIcon, {iconNames} from "./ActivityIcon.svelte";

  export let value;
</script>

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