bandolier-template/admin/bando/demos/Icon.svelte

<script>
  import Icon from "$/client/components/Icon.svelte";
  let size = 64;
  let fill = "none";
  let color = "var(--color)";
  let width = "2px";
  let shadow = "";
  let tooltip = "This is a tip!";
  let tip_position = "bottom";
</script>

<style>
  icons {
    display: flex;
    flex-direction: column;
  }

  icons div {
    display: flex;
    flex-direction: row;
    font-size: 2em;
  }

  icons div input {
    font-size: 1em;
  }
</style>

<icons>
  <div>size: <input name="size" bind:value={ size } /></div>
  <div>fill: <input name="fill" bind:value={ fill } /></div>
  <div>width: <input name="width" bind:value={ width } /></div>
  <div>color: <input name="color" bind:value={ color } /></div>
  <div>shadow: <input name="shadow" type="checkbox" bind:checked={ shadow } /></div>
  <div>tooltip: <input name="tooltip" bind:value={ tooltip } /></div>
  <div>tip_position: <input name="tip_position" bind:value={ tip_position } /></div>
  <Icon name="keyboard"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
  <Icon name="alarm-clock" color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
  <Icon name="activity"    color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
  <Icon name="apple"       color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
  <Icon name="angry"       color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
  <Icon name="anchor"      color={color} size={size} fill={fill} width={width} shadow={shadow} tooltip={tooltip} tip_position={tip_position} />
</icons>

<hr>
<a href="/admin/#/icons"><button type="button">See all icons and search them.</button></a>