Merge pull request #3 from mcanouil/fix-issue2

Fix-issue2
mcanouil · Aug 13, 2022 · 4b59ac1 · 4b59ac1
2 parents cef1648 + cbb6717
commit 4b59ac1
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 15 deletions.
diff --git 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: <https://github.com/microsoft/fluentui-emoji>).
 
+### 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
@@ -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',
-        '<span class="iconify-inline"' .. data_icon .. '"></span>'
-      )
+
+      if isEmpty(size) then
+        return pandoc.RawInline(
+          'html',
+          '<span class="iconify-inline"' .. data_icon .. '"></span>'
+        )
+      else
+        return pandoc.RawInline(
+          'html',
+          '<span class="iconify-inline' .. size .. '"' .. data_icon .. '"></span>'
+        )
+      end
     else
       return pandoc.Null()
     end

diff --git a/_extensions/iconify/size.css 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
@@ -11,16 +11,19 @@ It provides an `{{{< iconify >}}}` shortcode:
   {{{< iconify <icon-name> >}}}
   ```
 
-- Optional `<set>` (default is `fluent-emoji`):
+- Optional `<set>` (default is `fluent-emoji`) and  `<size=...>`:
   ``` markdown
-  {{{< iconify <set> <icon-name> >}}}
+  {{{< iconify <set> <icon-name> <size=...> >}}}
   ```
 
 For example:
 
-| Shortcode                                             | Icon                                              |
-| ----------------------------------------------------- | ------------------------------------------------- |
-| `{{{< iconify exploding-head >}}}`                   | {{< iconify exploding-head >}}                   |
-| `{{{< 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 >}}                   |