From 512cc1d22ef767221155575137fde71cfe5f62ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20Canouil?= <8896044+mcanouil@users.noreply.github.com> Date: Sat, 13 Aug 2022 12:58:34 +0200 Subject: [PATCH 1/2] fix: Add size option to shortcode Fixes #2 --- README.md | 50 ++++++++++++++ _extensions/iconify/iconify.lua | 42 ++++++++++-- _extensions/iconify/size.css | 115 ++++++++++++++++++++++++++++++++ example.qmd | 16 +++-- 4 files changed, 209 insertions(+), 14 deletions(-) create mode 100644 _extensions/iconify/size.css diff --git a/README.md b/README.md index 81d56ba..2b8d8cc 100644 --- a/README.md +++ b/README.md @@ -18,9 +18,13 @@ To embed an icon, use the `{{< iconify >}}` shortcode[^1]. For example: ```default {{< iconify exploding-head >}} +{{< iconify exploding-head size=2xl >}} +{{< iconify exploding-head size=10x >}} {{< iconify fluent-emoji-high-contrast 1st-place-medal >}} {{< iconify twemoji 1st-place-medal >}} {{< iconify line-md loading-alt-loop >}} +{{< iconify exploding-head size=2xl>}} +{{< iconify fluent-emoji-flat exploding-head size=10x>}} ``` This extension includes support for thousands of icons (including animated icons). @@ -30,6 +34,52 @@ You can browse all of the available sets of icons here: [^1]: The default icon set is `fluent-emoji` (source: ). +### Sizing Icons + +This extension provides relative, literal, and LaTeX-style sizing for icons. +When the size is invalid, no size changes are made. + +- Relative sizing: `{{< iconify exploding-head size=2xl >}}`. + + | Relative Sizing Class | Font Size | Equivalent in Pixels | + |-----------------------|-----------|----------------------| + | fa-2xs | 0.625em | 10px | + | fa-xs | 0.75em | 12px | + | fa-sm | 0.875em | 14px | + | fa-lg | 1.25em | 20px | + | fa-xl | 1.5em | 24px | + | fa-2xl | 2em | 32px | + +- Literal sizing: `{{< iconify exploding-head size=5x >}}`. + + | Literal Sizing Class | Font Size | + |----------------------|-----------| + | fa-1x | 1em | + | fa-2x | 2em | + | fa-3x | 3em | + | fa-4x | 4em | + | fa-5x | 5em | + | fa-6x | 6em | + | fa-7x | 7em | + | fa-8x | 8em | + | fa-9x | 9em | + | fa-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 | + ## Example Here is the source code for a minimal example: [example.qmd](example.qmd). diff --git a/_extensions/iconify/iconify.lua b/_extensions/iconify/iconify.lua index 1d8bc8d..6b03121 100644 --- a/_extensions/iconify/iconify.lua +++ b/_extensions/iconify/iconify.lua @@ -2,10 +2,30 @@ local function ensureHtmlDeps() quarto.doc.addHtmlDependency({ name = 'iconify', version = '2.2.1', - scripts = {"iconify.min.js"} + scripts = {"iconify.min.js"}, + stylesheets = {"size.css"} }) end +local function isEmpty(s) + return s == nil or s == '' +end + +local function isValidSize(size) + local validSizes = { + "tiny", "scriptsize", "footnotesize", "small", "normalsize", + "large", "Large", "LARGE", "huge", "Huge", + "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", + "2xs", "xs", "sm", "lg", "xl", "2xl" + } + for _, v in ipairs(validSizes) do + if v == size then + return " iconify-" .. size + end + end + return "" +end + return { ["iconify"] = function(args, kwargs) @@ -15,17 +35,25 @@ return { set = icon icon = pandoc.utils.stringify(args[2]) end - + local size = isValidSize(pandoc.utils.stringify(kwargs["size"])) -- detect html (excluding epub which won't handle fa) if quarto.doc.isFormat("html:js") then ensureHtmlDeps() + data_icon = ' data-icon="' .. set .. ':' .. icon .. '"' -- alt_text = ' aria-label="Icon ' .. icon .. ' from ' .. set .. ' set imported with Iconify"' - - return pandoc.RawInline( - 'html', - '' - ) + + if isEmpty(size) then + return pandoc.RawInline( + 'html', + '' + ) + else + return pandoc.RawInline( + 'html', + '' + ) + end else return pandoc.Null() end diff --git a/_extensions/iconify/size.css b/_extensions/iconify/size.css new file mode 100644 index 0000000..27bbecf --- /dev/null +++ b/_extensions/iconify/size.css @@ -0,0 +1,115 @@ +.iconify-tiny { + font-size: 0.5em; +} + +.iconify-scriptsize { + font-size: 0.7em; +} + +.iconify-footnotesize { + font-size: 0.8em; +} + +.iconify-small { + font-size: 0.9em; +} + +.iconify-normalsize { + font-size: 1em; +} + +.iconify-large { + font-size: 1.2em; +} + +.iconify-Large { + font-size: 1.5em; +} + +.iconify-LARGE { + font-size: 1.75em; +} + +.iconify-huge { + font-size: 2em; +} + +.iconify-Huge { + font-size: 2.5em; +} + +.iconify-1x { + font-size: 1em; +} + +.iconify-2x { + font-size: 2em; +} + +.iconify-3x { + font-size: 3em; +} + +.iconify-4x { + font-size: 4em; +} + +.iconify-5x { + font-size: 5em; +} + +.iconify-6x { + font-size: 6em; +} + +.iconify-7x { + font-size: 7em; +} + +.iconify-8x { + font-size: 8em; +} + +.iconify-9x { + font-size: 9em; +} + +.iconify-10x { + font-size: 10em; +} + +.iconify-2xs { + font-size: 0.625em; + line-height: 0.1em; + vertical-align: 0.225em; +} + +.iconify-xs { + font-size: 0.75em; + line-height: 0.08333em; + vertical-align: 0.125em; +} + +.iconify-sm { + font-size: 0.875em; + line-height: 0.07143em; + vertical-align: 0.05357em; +} + +.iconify-lg { + font-size: 1.25em; + line-height: 0.05em; + vertical-align: -0.075em; +} + +.iconify-xl { + font-size: 1.5em; + line-height: 0.04167em; + vertical-align: -0.125em; +} + +.iconify-2xl { + font-size: 2em; + line-height: 0.03125em; + vertical-align: -0.1875em; +} diff --git a/example.qmd b/example.qmd index dbea1b0..42db10a 100644 --- a/example.qmd +++ b/example.qmd @@ -11,16 +11,18 @@ It provides an `{{{< iconify >}}}` shortcode: {{{< iconify >}}} ``` -- Optional `` (default is `fluent-emoji`): +- Optional `` (default is `fluent-emoji`) and ``: ``` markdown - {{{< iconify >}}} + {{{< iconify >}}} ``` For example: -| Shortcode | Icon | -| ----------------------------------------------------- | ------------------------------------------------- | -| `{{{< iconify exploding-head >}}}` | {{< iconify exploding-head >}} | +| Shortcode | Icon | +| -------------------------------------------------------------- | ---------------------------------------------------------- | +| `{{{< iconify exploding-head >}}}` | {{< iconify exploding-head >}} | +| `{{{< iconify exploding-head size=2xl >}}}` | {{< iconify exploding-head size=2xl >}} | +| `{{{< iconify exploding-head size=10x >}}}` | {{< iconify exploding-head size=10x >}} | | `{{{< 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 twemoji 1st-place-medal >}}}` | {{< iconify twemoji 1st-place-medal >}} | +| `{{{< iconify line-md loading-alt-loop >}}}` | {{< iconify line-md loading-alt-loop >}} | From cbb671756e26b84c72164a8e9d8c16cf47cce272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micka=C3=ABl=20Canouil?= <8896044+mcanouil@users.noreply.github.com> Date: Sat, 13 Aug 2022 13:00:29 +0200 Subject: [PATCH 2/2] fix: add latex sizing example --- example.qmd | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/example.qmd b/example.qmd index 42db10a..e4fceb3 100644 --- a/example.qmd +++ b/example.qmd @@ -18,11 +18,12 @@ It provides an `{{{< iconify >}}}` shortcode: For example: -| Shortcode | Icon | -| -------------------------------------------------------------- | ---------------------------------------------------------- | -| `{{{< iconify exploding-head >}}}` | {{< iconify exploding-head >}} | -| `{{{< iconify exploding-head size=2xl >}}}` | {{< iconify exploding-head size=2xl >}} | -| `{{{< iconify exploding-head size=10x >}}}` | {{< iconify exploding-head size=10x >}} | -| `{{{< 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 >}} | +| Shortcode | Icon | +| --------------------------------------------------------------- | ---------------------------------------------------------- | +| `{{{< iconify exploding-head >}}}` | {{< iconify exploding-head >}} | +| `{{{< iconify exploding-head size=2xl >}}}` | {{< iconify exploding-head size=2xl >}} | +| `{{{< iconify exploding-head size=10x >}}}` | {{< iconify exploding-head size=10x >}} | +| `{{{< 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 >}} |