Lordicon Extension for Quarto

This extension allows you to use animated lordicon icons in your Quarto HTML documents.

Showcase

Source

The {{< li >}} shortcode renders an icon (specified by its code) after downloading it from the lordicon CDN. The code of each icon can be found on lordicon by clicking Export and then “Embed HTML.” The code will be displayed towards the bottom of the popup screen.

The {{< lif >}} shortcode renders an icon (specified by its filepath) from a local .json file. The file can be downloaded from lordicon by clicking Export and then “JSON (Lottie).” Note that some customization options (e.g., state) may only be available with the larger “Raw” file type.

ShortCode	Rendered
{{< li ibydboev >}}
{{< lif gift_raw.json >}}

Colors

colors controls the icon’s coloring. Outline icons typically have just a primary and secondary color, but flat and lineal icons can have many more. Each color should be given in rank:color format (where ranks are primary, secondary, tertiary, etc.) and multiple colors should be separated by commas. Colors can be given in HTML color names or hexcodes.

Shortcode	Icon
{{< li rehjpyyh >}}
{{< li rehjpyyh colors=primary:gold >}}
{{< li rehjpyyh colors=secondary:gold >}}
{{< li rehjpyyh colors=primary:gray,secondary:orange >}}
{{< li rehjpyyh colors=primary:#4030e8,secondary:#ee66aa >}}

Stroke

stroke controls how thick the lines in an icon are.

Shortcode	Icon
{{< li rehjpyyh stroke=light >}}
{{< li rehjpyyh stroke=regular >}}
{{< li rehjpyyh stroke=bold >}}

Advanced

• See CSS styling to resize and style icons
• See Animations to control icon animations
• See Target to trigger animations from other objects