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" title="Not so big" width="480" height="400" loading="lazy" />

Preview:

Icons

Permanent link

11ty Beer uses eleventy-plugin-icons to use icon shortcodes, You can use si (Simple Icons), mdi (Material Design Icons), lucide, feather. You can find the icons in their respective website. (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:

Some text Last.fm