Implement faster icon loading by inlining icons from the Tabler sprite. The previous method required downloading and parsing a large file, causing delays in icon rendering. Now, icons are generated and cached, improving page load times. Update the icon helper to utilize the new inline method.

Author: lovasoa

CHANGELOG.md

@@ -8,6 +8,7 @@
   - When response compression is enabled, additional buffering is needed. Users reported a better experience with pages that load more progressively, reducing the time before the pages' shell is rendered.
   - When SQLPage is deployed behind a reverse proxy, compressing responses between sqlpage and the proxy is wasteful.
  - In the table component, allow simple objects in custom_actions instead of requiring arrays of objects.
+ - Fatser icon loading. Previously, even a page containing a single icon required downloading and parsing a ~2MB file. This resulted in a delay where pages initially appeared with a blank space before icons appeared. Icons are now inlined inside pages and appear instantaneously.
 
 ## v0.39.0 (2025-10-28)
  - Ability to execute sql for URL paths with another extension. If you create sitemap.xml.sql, it will be executed for example.com/sitemap.xml

build.rs

@@ -22,7 +22,10 @@ async fn main() {
     for h in [
         spawn(download_deps(c.clone(), "sqlpage.js")),
         spawn(download_deps(c.clone(), "sqlpage.css")),
-        spawn(download_deps(c.clone(), "tabler-icons.svg")),
+        spawn(download_tabler_icons(
+            c.clone(),
+            "https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/tabler-sprite.svg",
+        )),
         spawn(download_deps(c.clone(), "apexcharts.js")),
         spawn(download_deps(c.clone(), "tomselect.js")),
         spawn(download_deps(c.clone(), "favicon.svg")),
@@ -173,6 +176,73 @@ fn make_url_path(url: &str) -> PathBuf {
     sqlpage_artefacts.join(filename)
 }
 
+async fn download_tabler_icons(client: Rc<awc::Client>, sprite_url: &str) {
+    let out_dir = PathBuf::from(std::env::var("OUT_DIR").unwrap());
+    let icon_map_path = out_dir.join("icons.rs");
+
+    if !icon_map_path.exists() {
+        let cached_sprite_path = make_url_path(sprite_url);
+        download_url_to_path(&client, sprite_url, &cached_sprite_path).await;
+        generate_icons_rs(&icon_map_path, &cached_sprite_path);
+    }
+}
+
+fn generate_icons_rs(icon_map_path: &Path, cached_sprite_path: &Path) {
+    let sprite_content = std::fs::read_to_string(cached_sprite_path).unwrap();
+    let icons = extract_icons_from_sprite(&sprite_content);
+    let mut file = File::create(icon_map_path).unwrap();
+
+    writeln!(file, "#[allow(clippy::all)]").unwrap();
+    writeln!(file, "use std::collections::HashMap;").unwrap();
+    writeln!(file, "use std::sync::LazyLock;").unwrap();
+    writeln!(file).unwrap();
+    writeln!(
+        file,
+        "pub static ICON_MAP: LazyLock<HashMap<String, &'static str>> = LazyLock::new(|| {{"
+    )
+    .unwrap();
+    writeln!(file, "    let mut m = HashMap::new();").unwrap();
+
+    for (name, content) in icons {
+        writeln!(file, "    m.insert({:?}.to_string(), r#\"{}\"#);", name, content).unwrap();
+    }
+
+    writeln!(file, "    m").unwrap();
+    writeln!(file, "}});").unwrap();
+}
+
+fn extract_icons_from_sprite(sprite_content: &str) -> Vec<(String, String)> {
+    let mut icons = Vec::new();
+
+    let mut pos = 0;
+    while let Some(symbol_start) = sprite_content[pos..].find("<symbol") {
+        let symbol_start = pos + symbol_start;
+        let Some(symbol_end) = sprite_content[symbol_start..].find("</symbol>") else {
+            break;
+        };
+        let symbol_end = symbol_start + symbol_end + "</symbol>".len();
+
+        let symbol_tag = &sprite_content[symbol_start..symbol_end];
+
+        if let Some(id_start) = symbol_tag.find("id=\"tabler-") {
+            let id_start = id_start + "id=\"tabler-".len();
+            if let Some(id_end) = symbol_tag[id_start..].find('"') {
+                let icon_name = &symbol_tag[id_start..id_start + id_end];
+
+                let content_start = symbol_tag.find('>').unwrap() + 1;
+                let content_end = symbol_tag.rfind("</symbol>").unwrap();
+                let inner_content = symbol_tag[content_start..content_end].trim();
+
+                icons.push((icon_name.to_string(), inner_content.to_string()));
+            }
+        }
+
+        pos = symbol_end;
+    }
+
+    icons
+}
+
 /// On debian-based linux distributions, odbc drivers are installed in /usr/lib/<target>-linux-gnu/odbc
 /// which is not in the default library search path.
 fn set_odbc_rpath() {

src/template_helpers.rs

@@ -67,7 +67,7 @@ pub fn register_all_helpers(h: &mut Handlebars<'_>, config: &AppConfig) {
     register_helper(h, "app_config", AppConfigHelper(config.clone()));
 
     // icon helper: generate an image with the specified icon
-    h.register_helper("icon_img", Box::new(IconImgHelper(site_prefix)));
+    h.register_helper("icon_img", Box::new(IconImgHelper));
     register_helper(h, "markdown", MarkdownHelper::new(config));
     register_helper(h, "buildinfo", buildinfo_helper as EH);
     register_helper(h, "typeof", typeof_helper as H);
@@ -209,8 +209,13 @@ impl CanHelp for AppConfigHelper {
     }
 }
 
-/// Generate an image with the specified icon. Struct Param is the site prefix
-struct IconImgHelper(String);
+#[allow(clippy::unreadable_literal)]
+mod icons {
+    include!(concat!(env!("OUT_DIR"), "/icons.rs"));
+}
+
+/// Generate an image with the specified icon.
+struct IconImgHelper;
 impl HelperDef for IconImgHelper {
     fn call<'reg: 'rc, 'rc>(
         &self,
@@ -230,11 +235,15 @@ impl HelperDef for IconImgHelper {
             }
         };
         let size = params[1].as_u64().unwrap_or(24);
+
+        let Some(inner_content) = icons::ICON_MAP.get(name).copied() else {
+            log::debug!("icon_img: icon {name} not found");
+            return Ok(());
+        };
+
         write!(
             writer,
-            "<svg width={size} height={size}><use href=\"{}{}#tabler-{name}\" /></svg>",
-            self.0,
-            static_filename!("tabler-icons.svg")
+            "<svg viewBox=\"0 0 24 24\" width=\"{size}\" height=\"{size}\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">{inner_content}</svg>"
         )?;
         Ok(())
     }

src/webserver/http.rs

@@ -437,7 +437,6 @@ pub fn create_app(
                 .service(static_content::apexcharts_js())
                 .service(static_content::tomselect_js())
                 .service(static_content::css())
-                .service(static_content::icons())
                 .service(static_content::favicon())
                 .default_service(fn_service(main_handler)),
         )

src/webserver/static_content.rs

@@ -30,26 +30,27 @@ macro_rules! static_file_endpoint {
     }};
 }
 
+#[must_use]
 pub fn js() -> Resource {
     static_file_endpoint!("sqlpage", "js", "application/javascript")
 }
 
+#[must_use]
 pub fn apexcharts_js() -> Resource {
     static_file_endpoint!("apexcharts", "js", "application/javascript")
 }
 
+#[must_use]
 pub fn tomselect_js() -> Resource {
     static_file_endpoint!("tomselect", "js", "application/javascript")
 }
 
+#[must_use]
 pub fn css() -> Resource {
     static_file_endpoint!("sqlpage", "css", "text/css")
 }
 
-pub fn icons() -> Resource {
-    static_file_endpoint!("tabler-icons", "svg", "image/svg+xml")
-}
-
+#[must_use]
 pub fn favicon() -> Resource {
     static_file_endpoint!("favicon", "svg", "image/svg+xml")
 }