<script lang="ts" context="module">
  let loaded = false;
</script>

<script lang="ts">
  export let plain = false;
  export let name: string;
  export let border = false;

  if (!loaded) {
    document.head.innerHTML += `<link
      rel="stylesheet"
      href="vendor/boxicons/css/boxicons.min.css"
    />`;
    loaded = true;
  }
</script>

<i class="bx bx-{name}" class:plain class:bx-border={border} />

<style>
  .bx:not(.plain) {
    font-size: 115%;
  }

  .bx-border {
    border-color: white;
  }
</style>
