fix(deps): use Lucide icons for admonitions

_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'

_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

_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 %}
 <div class="admonition {{ include.type }} rounded">
-    <p class="admonition-title">{{ title }}</p>
+    <p class="admonition-title">
+        {% if icon != "" %}<i data-lucide="{{ icon }}" aria-hidden="true"></i>{% endif %}
+        {{ title }}
+    </p>
     <p>
         {{ include.body | markdownify }}
     </p>

_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};
         }
     }
 }

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 });
+})();