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

<script>
  import Icon from "$/client/components/Icon.svelte";
  import Code from "$/client/components/Code.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,
  icons div select {
    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:
    <select name="tip_position" bind:value={ tip_position }>
      <option>bottom</option>
      <option>left</option>
      <option>right</option>
      <option>top</option>
      <option>bottom-left</option>
      <option>bottom-right</option>
      <option>top-left</option>
      <option>top-right</option>
    </select>
  </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>
<h4>Code Sample using <code>anchor</code></h4>

<Code language="html" content='<Icon name="anchor"&#13;  color="{color}"&#13;  size="{size}"&#13;  fill="{fill}"&#13;  width="{width}"&#13;  shadow="{shadow}"&#13;  tooltip="{tooltip}"&#13;  tip_position="{tip_position}" />' />

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