Icon

.icon adjusts its own appearance to fit the surrounding context.

Applicable Elements

Basic Usage

.icon sits well in text elements such as <p> or <h1>.
It also works seamlessly alongside other sashimi UI classes like .button, .link and .menu-item.

Heading with an icon

Settings have been saved.

<h2>
  <svg class="icon"><use href="/diamond.svg#root" /></svg>
  Heading with an icon
</h2>

<button class="button">
  <img class="icon" src="/delete_blue.svg#root" alt=""/>
  Delete
</button>

<p>
  <picture class="icon">
    <source srcset="/saved_white.svg#root" media="(prefers-color-scheme: dark)"/>
    <img src="/saved_black.svg#root" alt="" aria-hidden="true"/>
  </picture>
  Settings have been saved.
</p>

Tinting Icons

sashimi UI does NOT provide a built-in icon recoloring feature.
we recommend using SVGs for icon coloring.

Prepare SVGs that have no fixed width/height, and whose fill or stroke are currentColor.
Make sure it has an element with an id.
Then reference them with <use> so the icon inherits color from CSS.

<!-- icon.svg -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  id="root"
  viewBox="0 -960 960 960"
  fill="currentColor"
>
  <path d="..."/>
</svg>
<!-- index.html -->
<button class="button">
  <svg class="icon">
    <title>alt text</title>
    <use href="/icon.svg#root" />
  </svg>
  Button Text
</button>