Skip to content

Use Iconify icons in HTML-based Quarto documents (over 200,000 open source vector icons)

License

Notifications You must be signed in to change notification settings

mcanouil/quarto-iconify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Iconify Extension for Quarto

This extension provides support to free and open source icons provided by Iconify.
Icons can be used only in HTML-based documents.

Installing

quarto add mcanouil/quarto-iconify

This will install the extension under the _extensions subdirectory.
If you're using version control, you will want to check in this directory.

Using

To embed an icon, use the {{< iconify >}} shortcode1. For example:

{{< iconify exploding-head >}}
{{< iconify fluent-emoji exploding-head >}}
{{< iconify fluent-emoji:exploding-head >}}
{{< iconify exploding-head size=2xl >}}
{{< iconify exploding-head size=5x rotate=180deg >}}
{{< iconify exploding-head size=Huge >}}
{{< iconify fluent-emoji-high-contrast 1st-place-medal >}}
{{< iconify twemoji 1st-place-medal >}}
{{< iconify line-md loading-alt-loop >}}
{{< iconify fa6-brands apple width=50px height=10px rotate=90deg flip=vertical >}}
{{< iconify simple-icons:quarto >}}

This extension includes support for thousands of icons (including animated icons). You can browse all of the available sets of icons here:

https://icon-sets.iconify.design/

Iconify Attributes

Iconify API provides additional attributes: https://docs.iconify.design/iconify-icon/.
Currently, this extension supports: size, width, height, flip, rotate, title2, label2 (i.e., aria-label), and inline3.

{{< iconify <set> <icon> <size=...> <width=...> <height=...> <flip=...> <rotate=...> <title=...> <label=...> <inline=...> >}}
{{< iconify <set:icon> <size=...> <width=...> <height=...> <flip=...> <rotate=...> <title=...> <label=...> <inline=...> >}}

Sizing Icons

This extension provides relative, literal, and LaTeX-style sizing for icons.
When the size is invalid, no size changes are made.

  • CSS-style sizing: {{< iconify exploding-head size=42px >}}.

  • Relative sizing: {{< iconify exploding-head size=2xl >}}.

    Relative Sizing Font Size Equivalent in Pixels
    2xs 0.625em 10px
    xs 0.75em 12px
    sm 0.875em 14px
    lg 1.25em 20px
    xl 1.5em 24px
    2xl 2em 32px
  • Literal sizing: {{< iconify exploding-head size=5x >}}.

    Literal Sizing Font Size
    1x 1em
    2x 2em
    3x 3em
    4x 4em
    5x 5em
    6x 6em
    7x 7em
    8x 8em
    9x 9em
    10x 10em
  • LaTeX-style sizing: {{< iconify exploding-head size=Huge >}}.

    Sizing Command Font Size (HTML)
    tiny (= \tiny) 0.5em
    scriptsize (= \scriptsize) 0.7em
    footnotesize (= \footnotesize) 0.8em
    small (= \small) 0.9em
    normalsize (= \normalsize) 1em
    large (= \large) 1.25em
    Large (= \Large) 1.5em
    LARGE (= \LARGE) 1.75em
    huge (= \huge) 2em
    Huge (= \Huge) 2.5em
  • width or height can be set to define icon's property while keeping aspect ratio.
    Note: width and height are not set if size was defined.

Example

Here is the source code for a minimal example: example.qmd.

This is the output of example.qmd for HTML.


Iconify by Vjacheslav Trushkin under MIT License.

Footnotes

  1. The default icon set is fluent-emoji (source: https://github.com/microsoft/fluentui-emoji).

  2. title and label takes the following default value: Icon <icon> from <set> Iconify.design set.. 2

  3. inline is a boolean attribute that can be set to true or false. Default is true.