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

<script>
  import IconImage from "$/client/components/IconImage.svelte";

  let index = 0;

  let grayscale=0;

  const icon_patterns = [
    {name: "archive", pattern: "dots-sm", hue: "green", background_hue: "orange"},
    {name: "dollar-sign", pattern: "grid-sm", hue: "orange", background_hue: "blue"},
    {name: "arrow-up-circle", pattern: "vertical-lines-md", hue: "purple", background_hue: "black"},
    {name: "camera", pattern: "triangles-lg", hue: "pink", background_hue: "green"},
  ];

  let props = icon_patterns[index];

  const change = () => {
    index += 1;
    props = icon_patterns[index % icon_patterns.length];
  }
</script>

<style>
  card {
    max-width: 600px;
  }
</style>

<card>
    <top>
    <!-- this is how you assign a set of properties to a component using the {...} syntax -->
    <IconImage {...props } grayscale={ grayscale } />
    </top>
  <middle>
    <h4>IconImage Component</h4>
    <p>The IconImage is kind of a fancy <b>PlaceHolder</b> that embeds an <b>Icon</b> in a pattern field with color.  It's good enough to use for quite a while until you can design a better asset. The patterns come from <a href="https://bansal.io/pattern-css" target="_">pattern.css</a>.
    </p>

    <code>&lt;IconImage name="{ props.name }" pattern="{ props.pattern }" hue="{ props.hue }" background_hue="{ props.background_hue }" grayscale="{ grayscale }" /&gt;</code>

    <br>
  </middle>

  <bottom>
    <button-group>
      <button on:click={ change }>Change It!</button>
      <button on:click={ () => grayscale = grayscale == 0 ? 1 : 0 }>
        {#if grayscale}
          Color It!
        {:else}
          Gray It!
        {/if}
      </button>
    </button-group>
  </bottom>
</card>