From 7007990833ef025a5363ddf52f564724fea96544 Mon Sep 17 00:00:00 2001 From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com> Date: Sat, 5 Sep 2026 15:05:09 -0400 Subject: [PATCH] fix(deps): use Lucide icons for admonitions Replace admonition SVG asset masks with Lucide icons loaded from CDN and initialized at runtime. This updates the admonition include and styles to render inline icons, records Lucide in the site license data, and removes the now-unused bundled icon files. --- _config_theme.yml | 2 + _data/licenses.yml | 6 +++ _includes/admonition.html | 48 ++++++++++--------- _sass/admonition.scss | 42 +++++++--------- assets/img/icons/bolt-solid.svg | 1 - .../img/icons/exclamation-triangle-solid.svg | 1 - assets/img/icons/fire-solid.svg | 1 - assets/img/icons/info-circle-solid.svg | 1 - assets/img/icons/pen-solid.svg | 1 - assets/img/icons/question-circle-solid.svg | 1 - assets/img/icons/times-circle-solid.svg | 1 - assets/js/lucide-init.js | 12 +++++ 12 files changed, 64 insertions(+), 53 deletions(-) delete mode 100644 assets/img/icons/bolt-solid.svg delete mode 100644 assets/img/icons/exclamation-triangle-solid.svg delete mode 100644 assets/img/icons/fire-solid.svg delete mode 100644 assets/img/icons/info-circle-solid.svg delete mode 100644 assets/img/icons/pen-solid.svg delete mode 100644 assets/img/icons/question-circle-solid.svg delete mode 100644 assets/img/icons/times-circle-solid.svg create mode 100644 assets/js/lucide-init.js diff --git a/_config_theme.yml b/_config_theme.yml index 9c79ffc4..8f390fda 100644 --- a/_config_theme.yml +++ b/_config_theme.yml @@ -72,6 +72,8 @@ site-css: site-js: - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.812.190302/dist/crowdin.js" - "/assets/js/crowdin-init.js" + - href: "https://cdn.jsdelivr.net/npm/lucide@1.41.0/dist/umd/lucide.min.js" + - "/assets/js/lucide-init.js" - "/assets/js/tabs.js" theme-switcher: true theme-switcher-style: 'button' diff --git a/_data/licenses.yml b/_data/licenses.yml index d77a4667..1a7107df 100644 --- a/_data/licenses.yml +++ b/_data/licenses.yml @@ -41,6 +41,12 @@ jekyll: name: Jekyll url: https://jekyllrb.com/ license: MIT +lucide: + name: Lucide + # renovate: datasource=npm depName=lucide + version: '1.41.0' + url: https://lucide.dev/ + license: ISC marked: name: Marked # renovate: datasource=cdnjs depName=marked packageName=marked/lib/marked.umd.min.js versioning=semver diff --git a/_includes/admonition.html b/_includes/admonition.html index 1eb2738f..13d1c03c 100644 --- a/_includes/admonition.html +++ b/_includes/admonition.html @@ -4,30 +4,34 @@ {% if include.type.size > 0 and include.body.size > 0 %} {% assign types = " - attention:Attention, - caution:Caution, - danger:Danger, - error:Error, - hint:Hint, - important:Important, - note:Note, - seealso:See also, - tip:Tip, - todo: TODO, - warning:Warning" | split: "," %} - {% assign title = include.title | default: "" %} - {% if title == "" %} - {% for type in types %} - {% assign typeKeyVal = type | split: ":" %} - {% assign typeKey = typeKeyVal[0] | strip %} - {% assign typeValue = typeKeyVal[1] | strip %} - {% if typeKey == include.type %} - {% assign title = typeValue %} + attention:Attention:triangle-alert, + caution:Caution:shield-alert, + danger:Danger:octagon-alert, + error:Error:circle-x, + hint:Hint:circle-question-mark, + important:Important:flame, + note:Note:pencil, + seealso:See also:book-open, + tip:Tip:lightbulb, + todo:TODO:list-checks, + warning:Warning:triangle-alert" | split: "," %} + {% assign title = include.title | default: "" %} + {% assign icon = "" %} + {% for type in types %} + {% assign typeKeyVal = type | split: ":" %} + {% assign typeKey = typeKeyVal[0] | strip %} + {% if typeKey == include.type %} + {% assign icon = typeKeyVal[2] | strip %} + {% if title == "" %} + {% assign title = typeKeyVal[1] | strip %} {% endif %} - {% endfor %} - {% endif %} + {% endif %} + {% endfor %}
-

{{ title }}

+

+ {% if icon != "" %}{% endif %} + {{ title }} +

{{ include.body | markdownify }}

diff --git a/_sass/admonition.scss b/_sass/admonition.scss index f0b59d64..8460e00d 100644 --- a/_sass/admonition.scss +++ b/_sass/admonition.scss @@ -33,19 +33,18 @@ $admonitions-dark: ; $admonitions: - //class (type), icon filename, icon/border color - // TODO: Can we use font-awesome directly without keeping the svg files in our repo? - ('attention', 'exclamation-triangle-solid.svg', '#ff5252') - ('caution', 'bolt-solid.svg', '#ff9100') - ('danger', 'bolt-solid.svg', '#ff5252') - ('error', 'times-circle-solid.svg', '#ff5252') - ('hint', 'question-circle-solid.svg', '#00c953') - ('important', 'fire-solid.svg', '#ff9100') - ('note', 'pen-solid.svg', '#00b0ff') - ('seealso', 'info-circle-solid.svg', '#00b0ff') - ('tip', 'info-circle-solid.svg', '#00c953') - ('todo', 'pen-solid.svg', '#9e9e9e') - ('warning', 'exclamation-triangle-solid.svg', '#ff9100') + // class (type), icon/border color + ('attention', '#ff5252') + ('caution', '#ff9100') + ('danger', '#ff5252') + ('error', '#ff5252') + ('hint', '#00c953') + ('important', '#ff9100') + ('note', '#00b0ff') + ('seealso', '#00b0ff') + ('tip', '#00c953') + ('todo', '#9e9e9e') + ('warning', '#ff9100') ; .admonition { margin: 1.5625em 0; @@ -71,28 +70,23 @@ $admonitions: color: #212529; } -.admonition-title::before { +.admonition .admonition-title svg { + color: $primary-color; + display: inline-block; margin-right: .5rem; width: 1.2rem; height: 1.2rem; - display: inline-block; - content: ''; - -webkit-mask-size: cover; - mask-size: cover; - background-color: $primary-color; vertical-align: text-bottom; } -@each $name, $icon, $icon-color in $admonitions { +@each $name, $icon-color in $admonitions { @if $icon-color { .admonition.#{$name} { border-left-color: #{$icon-color}; } } - .admonition.#{$name} .admonition-title::before { - -webkit-mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%; - mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%; + .admonition.#{$name} .admonition-title svg { @if $icon-color { - background-color: #{$icon-color}; + color: #{$icon-color}; } } } diff --git a/assets/img/icons/bolt-solid.svg b/assets/img/icons/bolt-solid.svg deleted file mode 100644 index 6c678998..00000000 --- a/assets/img/icons/bolt-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/exclamation-triangle-solid.svg b/assets/img/icons/exclamation-triangle-solid.svg deleted file mode 100644 index b670ed90..00000000 --- a/assets/img/icons/exclamation-triangle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/fire-solid.svg b/assets/img/icons/fire-solid.svg deleted file mode 100644 index 0f44e02f..00000000 --- a/assets/img/icons/fire-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/info-circle-solid.svg b/assets/img/icons/info-circle-solid.svg deleted file mode 100644 index 82942b5c..00000000 --- a/assets/img/icons/info-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/pen-solid.svg b/assets/img/icons/pen-solid.svg deleted file mode 100644 index 255e8ba6..00000000 --- a/assets/img/icons/pen-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/question-circle-solid.svg b/assets/img/icons/question-circle-solid.svg deleted file mode 100644 index 92455702..00000000 --- a/assets/img/icons/question-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/img/icons/times-circle-solid.svg b/assets/img/icons/times-circle-solid.svg deleted file mode 100644 index f4fb9ffa..00000000 --- a/assets/img/icons/times-circle-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/js/lucide-init.js b/assets/js/lucide-init.js new file mode 100644 index 00000000..e3540df2 --- /dev/null +++ b/assets/js/lucide-init.js @@ -0,0 +1,12 @@ +/** + * Replace Lucide icon placeholders with inline SVGs. + */ +(function() { + 'use strict'; + + if (!globalThis.lucide) { + return; + } + + globalThis.lucide.createIcons({ icons: globalThis.lucide.icons }); +})();