Image Placeholder Component

<svg aria-label="image not found" class="image-placeholder">
  <use href="#image-placeholder" />
</svg>

Variable widths with borders

<div
  style="
    border: 1px solid var(--color-border-accent);
    height: 50px;
    width: 50px;
  "
>
  <svg aria-label="image not found" class="image-placeholder" role="img">
    <use href="#image-placeholder" />
  </svg>
</div>
<svg
  aria-label="image not found"
  class="image-placeholder"
  style="
    border: 1px solid var(--color-border-attention);
    height: 150px;
    width: 10px;
  "
  role="img"
>
  <use href="#image-placeholder" />
</svg>
<svg
  aria-label="image not found"
  class="image-placeholder"
  style="
    border: 1px dotted var(--color-border-attention);
    height: 250px;
    width: 250px;
  "
  role="img"
>
  <use href="#image-placeholder" />
</svg>