refactor: switch docs icons from FA to Lucide

CMakeLists.txt

@@ -30,6 +30,7 @@ file(MAKE_DIRECTORY "${DOXYGEN_BUILD_DIR_CMAKE}/html")
 # copy files to build directory
 file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/doxyconfig-header.html" DESTINATION "${SOURCE_DOCS_DIR}")
 file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/doxyconfig-Doxyfile" DESTINATION "${SOURCE_DOCS_DIR}")
+file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/doxyconfig-icons.js" DESTINATION "${SOURCE_DOCS_DIR}")
 file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/doxyconfig.css" DESTINATION "${SOURCE_DOCS_DIR}")
 file(COPY "${CMAKE_CURRENT_SOURCE_DIR}/doxyconfig-readthedocs-search.js" DESTINATION "${SOURCE_DOCS_DIR}")
 
@@ -62,17 +63,15 @@ set(SHARED_WEB_FILES_DEPENDS
         "${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@lizardbyte/shared-web/dist/crowdin-doxygen-css.css"
 )
 
-# set FONT_AWESOME_FILES depends
-set(FONT_AWESOME_FILES_DEPENDS
-        "${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
-        "${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/js/all.min.js"
-        "${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/webfonts/"
+# set LUCIDE_FILES depends
+set(LUCIDE_FILES_DEPENDS
+        "${CMAKE_CURRENT_SOURCE_DIR}/node_modules/lucide/dist/umd/lucide.min.js"
 )
 
 find_program(NPM npm REQUIRED)
 add_custom_target(_docs_npm_install
         COMMENT "Installing node modules"
-        BYPRODUCTS ${SHARED_WEB_FILES_DEPENDS} ${FONT_AWESOME_FILES_DEPENDS}
+        BYPRODUCTS ${SHARED_WEB_FILES_DEPENDS} ${LUCIDE_FILES_DEPENDS}
         COMMAND ${NPM} ci --ignore-scripts
         WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
         VERBATIM
@@ -91,20 +90,16 @@ add_custom_command(
         DEPENDS ${SHARED_WEB_FILES_DEPENDS}
 )
 
-# copy Font Awesome files
+# copy Lucide files
 add_custom_command(
-        OUTPUT  FONT_AWESOME_FILES
+        OUTPUT  LUCIDE_FILES
         COMMAND ${CMAKE_COMMAND}
-                -E copy ${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/css/all.min.css
-                    ${DOXYGEN_BUILD_DIR_CMAKE}/html/assets/fontawesome/css/all.min.css
+                -E make_directory ${DOXYGEN_BUILD_DIR_CMAKE}/html/assets/lucide
         COMMAND ${CMAKE_COMMAND}
-                -E copy ${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/js/all.min.js
-                    ${DOXYGEN_BUILD_DIR_CMAKE}/html/assets/fontawesome/js/all.min.js
-        COMMAND ${CMAKE_COMMAND}
-                -E copy_directory ${CMAKE_CURRENT_SOURCE_DIR}/node_modules/@fortawesome/fontawesome-free/webfonts
-                    ${DOXYGEN_BUILD_DIR_CMAKE}/html/assets/fontawesome/webfonts
-        COMMENT "Copying Font Awesome files"
-        DEPENDS ${FONT_AWESOME_FILES_DEPENDS}
+                -E copy ${CMAKE_CURRENT_SOURCE_DIR}/node_modules/lucide/dist/umd/lucide.min.js
+                    ${DOXYGEN_BUILD_DIR_CMAKE}/html/assets/lucide/lucide.min.js
+        COMMENT "Copying Lucide files"
+        DEPENDS ${LUCIDE_FILES_DEPENDS}
 )
 
 # convert to relative path, so doxygen doesn't get confused on Windows
@@ -130,5 +125,5 @@ add_custom_target(docs ALL
             DOXYCONFIG_THREADS=${DOXYGEN_NUM_THREADS}
             ${DOXYGEN_EXECUTABLE} doxyconfig-Doxyfile
         VERBATIM
-        DEPENDS FONT_AWESOME_FILES SHARED_WEB_FILES
+        DEPENDS LUCIDE_FILES SHARED_WEB_FILES
 )

docs/source_code.md

@@ -161,8 +161,8 @@ We have defined some custom aliases to simplify documenting examples.
 
 * \@examples - Start of an example block. This will format the following text as `cpp`.
 * \@examples_end - End of an example block.
-* \@fa_icon{font awsome definition} - Insert a Font Awesome icon. Give the icon style and name as arguments.
-  e.g. \@fa_icon{fa-solid fa-check}.
+* \@lucide_icon{icon name} - Insert a Lucide icon. Give the icon name as an argument.
+  e.g. \@lucide_icon{check}.
 * Admonitions
   * \@admonition{Custom Title | Content }
     @admonition{The one with the custom titles | It’s got a certain charm to it.}

doxyconfig-Doxyfile

@@ -44,6 +44,7 @@ HTML_EXTRA_FILES += ../third-party/doxyconfig/doxygen-awesome-css/doxygen-awesom
 HTML_EXTRA_FILES += ../third-party/doxyconfig/doxygen-awesome-css/doxygen-awesome-paragraph-link.js
 HTML_EXTRA_FILES += ../third-party/doxyconfig/doxygen-awesome-css/doxygen-awesome-interactive-toc.js
 HTML_EXTRA_FILES += ../third-party/doxyconfig/doxygen-awesome-css/doxygen-awesome-tabs.js
+HTML_EXTRA_FILES += doxyconfig-icons.js
 HTML_EXTRA_STYLESHEET = ../third-party/doxyconfig/doxygen-awesome-css/doxygen-awesome.css
 HTML_HEADER = doxyconfig-header.html
 
@@ -55,24 +56,24 @@ HTML_EXTRA_STYLESHEET += doxyconfig.css
 ALIASES = ""
 ALIASES += "examples=^^**Examples**^^@code{.cpp}"
 ALIASES += "examples_end=@endcode^^"
-# fontawesome
-ALIASES += "fa_icon{1}=<i class=\"\1\"></i>"
+# lucide
+ALIASES += "lucide_icon{1}=<i data-lucide=\"\1\" aria-hidden=\"true\"></i>"
 # admonitions
-ALIASES += "_admonition{4|}=<dl class=\"\2\"><dt>@fa_icon{\3} \1</dt><dd>\4</dd></dl>"
-ALIASES += "_admonition_b{4|}=<dl class=\"\2\"><dt><b><a style=\"pointer-events: none; cursor: default;\" class=\"el\" href=\"\">@fa_icon{\3} \1</a></b></dt><dd>\4</dd></dl>"
+ALIASES += "_admonition{4|}=<dl class=\"\2\"><dt>@lucide_icon{\3} \1</dt><dd>\4</dd></dl>"
+ALIASES += "_admonition_b{4|}=<dl class=\"\2\"><dt><b><a style=\"pointer-events: none; cursor: default;\" class=\"el\" href=\"\">@lucide_icon{\3} \1</a></b></dt><dd>\4</dd></dl>"
 # see: https://jothepro.github.io/doxygen-awesome-css/class_my_library_1_1_example.html#autotoc_md6
-ALIASES += "admonition{2|}=@_admonition_b{\1 | todo | fa-solid fa-bars | \2}"
-ALIASES += "attention{1}=@_admonition{Attention | section attention | | \1}"
-ALIASES += "caution{1}=@_admonition{Caution | section warning | | \1}"
-ALIASES += "danger{1}=@_admonition{Danger | bug | fa-solid fa-triangle-exclamation | \1}"
-ALIASES += "error{1}=@_admonition{Error | bug | fa-solid fa-circle-xmark | \1}"
-ALIASES += "hint{1}=@_admonition{Hint | section pre | | \1}"
-ALIASES += "important{1}=@_admonition{Important | section important | | \1}"
-ALIASES += "note{1}=@_admonition{Note | section note | | \1}"
-ALIASES += "seealso{1}=@_admonition{See also | section remark | | \1}"
-ALIASES += "tip{1}=@_admonition{Tip | section pre | | \1}"
-ALIASES += "todo{1}=@_admonition{TODO | section deprecated | | \1}"
-ALIASES += "warning{1}=@_admonition{Warning | section warning | | \1}"
+ALIASES += "admonition{2|}=@_admonition_b{\1 | todo | menu | \2}"
+ALIASES += "attention{1}=@_admonition{Attention | section attention | circle-alert | \1}"
+ALIASES += "caution{1}=@_admonition{Caution | section warning | triangle-alert | \1}"
+ALIASES += "danger{1}=@_admonition{Danger | bug | triangle-alert | \1}"
+ALIASES += "error{1}=@_admonition{Error | bug | circle-x | \1}"
+ALIASES += "hint{1}=@_admonition{Hint | section pre | info | \1}"
+ALIASES += "important{1}=@_admonition{Important | section important | flame | \1}"
+ALIASES += "note{1}=@_admonition{Note | section note | sticky-note | \1}"
+ALIASES += "seealso{1}=@_admonition{See also | section remark | info | \1}"
+ALIASES += "tip{1}=@_admonition{Tip | section pre | info | \1}"
+ALIASES += "todo{1}=@_admonition{TODO | section deprecated | pencil | \1}"
+ALIASES += "warning{1}=@_admonition{Warning | section warning | triangle-alert | \1}"
 # tabs
 # see: https://github.com/jothepro/doxygen-awesome-css/discussions/146
 ALIASES += tab{2|}="@htmlonly<li><b class=\"tab-title\">@endhtmlonly^^\1^^@htmlonly</b>@endhtmlonly^^\2^^@htmlonly</li>@endhtmlonly"

doxyconfig-header.html

@@ -24,10 +24,10 @@
 <link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
 $extrastylesheet
 
-<!--FONTAWESOME START-->
-<link href="$relpath^assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css" />
-<script type="text/javascript" src="$relpath^assets/fontawesome/js/all.min.js"></script>
-<!--FONTAWESOME END-->
+<!--LUCIDE START-->
+<script type="text/javascript" src="$relpath^assets/lucide/lucide.min.js"></script>
+<script type="text/javascript" src="$relpath^doxyconfig-icons.js"></script>
+<!--LUCIDE END-->
 
 <!--LIZARDBYTE/SHARED-WEB START-->
 <link href="$relpath^assets/shared-web/crowdin-doxygen-css.css" rel="stylesheet" type="text/css" />
@@ -44,6 +44,7 @@
 <script type="text/javascript" src="$relpath^doxygen-awesome-tabs.js"></script>
 <script type="text/javascript" src="$relpath^doxyconfig-readthedocs-search.js"></script>
 <script type="text/javascript">
+  DoxyconfigIcons.init()
   DoxygenAwesomeDarkModeToggle.init()
   DoxygenAwesomeFragmentCopyButton.init()
   DoxygenAwesomeParagraphLink.init()

doxyconfig-icons.js

@@ -0,0 +1,43 @@
+class DoxyconfigIcons {
+  static sectionIcons = {
+    attention: 'circle-alert',
+    deprecated: 'pencil',
+    important: 'flame',
+    note: 'sticky-note',
+    pre: 'info',
+    remark: 'info',
+    warning: 'triangle-alert',
+  };
+
+  static init() {
+    const replaceIcons = function() {
+      for (const [sectionClass, iconName] of Object.entries(DoxyconfigIcons.sectionIcons)) {
+        const headings = document.querySelectorAll(`dl.section.${sectionClass} > dt`);
+        for (const heading of headings) {
+          if (heading.querySelector('[data-lucide]')) {
+            continue;
+          }
+
+          const icon = document.createElement('i');
+          icon.setAttribute('aria-hidden', 'true');
+          icon.dataset.lucide = iconName;
+          heading.prepend(document.createTextNode(' '));
+          heading.prepend(icon);
+        }
+      }
+
+      for (const icon of document.querySelectorAll('[data-lucide]')) {
+        const iconName = icon.dataset.lucide;
+        icon.dataset.lucide = iconName.trim();
+      }
+
+      globalThis.lucide.createIcons({ icons: globalThis.lucide.icons });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', replaceIcons);
+    } else {
+      replaceIcons();
+    }
+  }
+}

doxyconfig.css

@@ -19,29 +19,11 @@ ul.search li.search-result {
     margin-bottom: 10px;
 }
 
-dl.section dt::before {
-    font-family: "Font Awesome 7 Free", sans-serif;
-}
-dl.section.attention dt::before {
-    content: "\f06a\00a0"  /* exclamation circle */
-}
-dl.section.deprecated dt::before {
-    content: "\f303\00a0"  /* pencil */
-}
-dl.section.important dt::before {
-    content: "\f06d\00a0"  /* fire */
-}
-dl.section.pre dt::before {
-    content: "\f05a\00a0"  /* information circle */
-}
-dl.section.note dt::before {
-    content: "\f249\00a0"  /* stick note */
-}
-dl.section.remark dt::before {
-    content: "\f05a\00a0"  /* information circle */
-}
-dl.section.warning dt::before {
-    content: "\f071\00a0"  /* exclamation triangle */
+.lucide {
+    display: inline-block;
+    height: 1em;
+    vertical-align: -0.125em;
+    width: 1em;
 }
 
 dl.attention {

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-free": "7.3.1",
-    "@lizardbyte/shared-web": "2026.812.190302"
+    "@lizardbyte/shared-web": "2026.812.190302",
+    "lucide": "1.40.0"
   }
 }

readthedocs_build.sh

@@ -30,22 +30,17 @@ function install_icons {
 
 function install_node_modules {
   echo "Creating output directories"
-  mkdir -p "${READTHEDOCS_OUTPUT}html/assets/fontawesome/css"
-  mkdir -p "${READTHEDOCS_OUTPUT}html/assets/fontawesome/js"
+  mkdir -p "${READTHEDOCS_OUTPUT}html/assets/lucide"
   mkdir -p "${READTHEDOCS_OUTPUT}html/assets/shared-web"
 
   echo "Installing node modules"
   pushd "${DOXYCONFIG_DIR}"
   npm ci --ignore-scripts
   popd
 
-  echo "Copying FontAwesome files"
-  cp "${DOXYCONFIG_DIR}/node_modules/@fortawesome/fontawesome-free/css/all.min.css" \
-    "${READTHEDOCS_OUTPUT}html/assets/fontawesome/css"
-  cp "${DOXYCONFIG_DIR}/node_modules/@fortawesome/fontawesome-free/js/all.min.js" \
-    "${READTHEDOCS_OUTPUT}html/assets/fontawesome/js"
-  cp -r "${DOXYCONFIG_DIR}/node_modules/@fortawesome/fontawesome-free/webfonts" \
-    "${READTHEDOCS_OUTPUT}html/assets/fontawesome/"
+  echo "Copying Lucide files"
+  cp "${DOXYCONFIG_DIR}/node_modules/lucide/dist/umd/lucide.min.js" \
+    "${READTHEDOCS_OUTPUT}html/assets/lucide/"
 
   echo "Copying shared-web files"
   cp "${DOXYCONFIG_DIR}/node_modules/@lizardbyte/shared-web/dist/crowdin.js" \
@@ -60,6 +55,7 @@ function merge_doxyconfigs {
   echo "Merging doxygen configs"
   cp "${DOXYCONFIG_DIR}/doxyconfig-Doxyfile" "${docs_dir}"
   cp "${DOXYCONFIG_DIR}/doxyconfig-header.html" "${docs_dir}"
+  cp "${DOXYCONFIG_DIR}/doxyconfig-icons.js" "${docs_dir}"
   cp "${DOXYCONFIG_DIR}/doxyconfig.css" "${docs_dir}"
   cp "${DOXYCONFIG_DIR}/doxyconfig-readthedocs-search.js" "${docs_dir}"
   cat "${docs_dir}Doxyfile" >> "${docs_dir}doxyconfig-Doxyfile"