Extras

Images

Permanent link

You can use image shortcode to adjust image sizes and loading specifier. (Utilities source)

Example:

{% image '/img/480x400.webp' 'Not so big' '480x400' 'lazy' %}

Code result:

<img src="/img/480x400.webp" alt="Not so big" width="480" height="400" loading="lazy" />

Preview:

Icons

Permanent link

11ty Beer uses eleventy-plugin-icons to use icon shortcodes, Simple Icons and Pictogrammers MDI are supported. (Utilities source)
In this example, home-city-outline from Pictogrammers MDI and lastdotfm from Simple Icons are used.

Example:

{% icon 'mdi:home-city-outline' %} Some text {% icon 'si:lastdotfm' %}

Code result:

<svg xmlns="http://www.w3.org/2000/svg" id="mdi-home-city-outline" viewBox="0 0 24 24" class="icon icon-home-city-outline">
  <path d="M10,2V4.26L12,5.59V4H22V19H17V21H24V2H10M7.5,5L0,10V21H15V10L7.5,5M14,6V6.93L15.61,8H16V6H14M18,6V8H20V6H18M7.5,7.5L13,11V19H10V13H5V19H2V11L7.5,7.5M18,10V12H20V10H18M18,14V16H20V14H18Z"/>
</svg> Some text 
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon icon-lastdotfm">
  <title>Last.fm</title>
  <path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.285 4.81 3.409 0 5.718-1.044 5.718-3.793 0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.934.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 1.869.907 1.869 1.704 0 1.017-.99 1.43-2.86 1.43-2.776 0-3.93-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"/>
</svg>

Preview: