example.qmd

---
title: Iconify Quarto Extension
format: html
---

This extension allows you to use [Iconify](https://icon-sets.iconify.design/) icons in your Quarto HTML documents.
It provides an `{{{< iconify >}}}` shortcode:

- Mandatory `<icon>`:
  ``` markdown
  {{{< iconify <icon> >}}}
  {{{< iconify <set:icon> >}}}
  ```

- Optional `<set>` (default is `fluent-emoji`) `<size=...>`, `<width=...>`, `<height=...>`, `<flip=...>`, `<rotate=...>`, `<title=...>`, `<label=...>`, and `<inline=...>`:
  ``` markdown
  {{{< iconify <set> <icon> <size=...> <width=...> <height=...> <flip=...> <rotate=...> <title=...> <label=...> <inline=...> >}}}
  ```
  If `<size=...>` is defined, `<width=...>` and `<height=...>` are not used.  
  See <https://docs.iconify.design/iconify-icon/> for more details.

For example:

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