Icon

A visual symbol that can be colored in multiple ways to help emphasis content.
---
block:
  _bookshop_name: elements/icon
  name: moon
  alt: Moon icon
  color: blue
  background: muted
  size: l
---
{% bookshop "{{block._bookshop_name}}" bind: block %}

Properties

sizeenum

The size of the icon

font-size
xs
s
m
l
xl
2xl
3xl

namestring

The name of the icon

altstring

A text description of the icon

colorenum

The color of the icon

font-color
gray
red
orange
yellow
green
cyan
blue
purple
pink

backgroundboolean

Whether to have a background

Examples

Sizes

---
blocks:
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: font-size
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: xs
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: s
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: m
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: xl
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: 2xl
  - _bookshop_name: elements/icon
    alt: null
    name: beaker
    color: pink
    background: muted
    size: 3xl
---
<div class="flex" style="gap: 1rem;">
  {% for block in blocks %}
    {% bookshop "{{block._bookshop_name}}" bind: block %}
  {% endfor %}
</div>

Colors

---
blocks:
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: font-color
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: gray
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: red
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: orange
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: yellow
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: green
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: cyan
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: blue
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: purple
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: pink
    background: muted
    size: l
---
<div class="flex" style="gap: 1rem;">
  {% for block in blocks %}
    {% bookshop "{{block._bookshop_name}}" bind: block %}
  {% endfor %}
</div>


---
blocks:
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: font-color
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: gray
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: red
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: orange
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: yellow
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: green
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: cyan
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: blue
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: purple
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: bolt
    color: pink
    background: contrast
    size: l
---
<div class="flex" style="gap: 1rem;">
  {% for block in blocks %}
    {% bookshop "{{block._bookshop_name}}" bind: block %}
  {% endfor %}
</div>

Backgrounds

---
blocks:
  - _bookshop_name: elements/icon
    alt: null
    name: cloud
    color: blue
    background: contrast
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: cloud
    color: blue
    background: muted
    size: l
  - _bookshop_name: elements/icon
    alt: null
    name: cloud
    color: blue
    background: false
    size: l
---
<div class="flex" style="gap: 1rem;">
  {% for block in blocks %}
    {% bookshop "{{block._bookshop_name}}" bind: block %}
  {% endfor %}
</div>