fix: Emoji rendering in svg preview

alanpjohn · alanpjohn · commit db622edc8b26 · 2026-03-15T01:24:09.000+05:30
- enabled `raster_images` feature on `resvg` crate to allow resvg to
  render emoji fonts
- Add a custom fallback selection function to make the fallback fonts
  for emojis more consistent.

Signed-off-by: Alan P John &lt;alanpjohn@outlook.com&gt;
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/crates/gpui/Cargo.toml b/crates/gpui/Cargo.toml
@@ -70,13 +70,16 @@ chrono.workspace = true
 profiling.workspace = true
 rand.workspace = true
 raw-window-handle = "0.6"
+regex.workspace = true
 refineable.workspace = true
 scheduler.workspace = true
 resvg = { version = "0.45.0", default-features = false, features = [
     "text",
     "system-fonts",
     "memmap-fonts",
+    "raster-images"
 ] }
+util.workspace = true
 usvg = { version = "0.45.0", default-features = false }
 util_macros.workspace = true
 schemars.workspace = true
@@ -148,7 +151,6 @@ gpui_platform.workspace = true
 lyon = { version = "1.0", features = ["extra"] }
 rand.workspace = true
 scheduler = { workspace = true, features = ["test-support"] }
-unicode-segmentation.workspace = true
 gpui_util = { workspace = true }
 proptest = { workspace = true }
 
diff --git a/crates/gpui/src/svg_renderer.rs b/crates/gpui/src/svg_renderer.rs
@@ -9,6 +9,23 @@ use std::{
     hash::Hash,
     sync::{Arc, LazyLock},
 };
+use util::is_emoji_character;
+
+/// Emoji font families for each platform
+/// Hardcoded for simplicity
+#[cfg(target_os = "macos")]
+const EMOJI_FONT_FAMILIES: &[&str] = &["Apple Color Emoji", ".AppleColorEmojiUI"];
+
+#[cfg(target_os = "windows")]
+const EMOJI_FONT_FAMILIES: &[&str] = &["Segoe UI Emoji", "Segoe UI Symbol"];
+
+#[cfg(any(target_os = "linux", target_os = "freebsd"))]
+const EMOJI_FONT_FAMILIES: &[&str] = &[
+    "Noto Color Emoji",
+    "Emoji One",
+    "Twitter Color Emoji",
+    "JoyPixels",
+];
 
 /// When rendering SVGs, we render them at twice the size to get a higher-quality result.
 pub const SMOOTH_SVG_SCALE_FACTOR: f32 = 2.;
@@ -52,10 +69,40 @@ impl SvgRenderer {
                 default_font_resolver(font, db)
             },
         );
+        let default_fallback_selection = usvg::FontResolver::default_fallback_selector();
+        let fallback_selection = Box::new(
+            move |ch: char, fonts: &[usvg::fontdb::ID], db: &mut Arc<usvg::fontdb::Database>| {
+                // Check if this is an emoji character
+                if is_emoji_character(ch) {
+                    // Build a list of emoji font families to query
+                    let families: SmallVec<[usvg::fontdb::Family; 8]> = EMOJI_FONT_FAMILIES
+                        .iter()
+                        .map(|&name| usvg::fontdb::Family::Name(name))
+                        .collect();
+
+                    let query = usvg::fontdb::Query {
+                        families: &families,
+                        weight: usvg::fontdb::Weight(400),
+                        stretch: usvg::fontdb::Stretch::Normal,
+                        style: usvg::fontdb::Style::Normal,
+                    };
+
+                    // Query returns the first matching font from the prioritized list
+                    if let Some(id) = db.query(&query) {
+                        if !fonts.contains(&id) {
+                            return Some(id);
+                        }
+                    }
+                }
+
+                // Fall back to default behavior for non-emoji or when no emoji font found
+                default_fallback_selection(ch, fonts, db)
+            },
+        );
         let options = usvg::Options {
             font_resolver: usvg::FontResolver {
                 select_font: font_resolver,
-                select_fallback: usvg::FontResolver::default_fallback_selector(),
+                select_fallback: fallback_selection,
             },
             ..Default::default()
         };
diff --git a/crates/util/src/util.rs b/crates/util/src/util.rs
@@ -727,6 +727,13 @@ pub fn word_consists_of_emojis(s: &str) -> bool {
     prev_end == s.len()
 }
 
+/// Check if a character is an emoji using Unicode properties.
+pub fn is_emoji_character(c: char) -> bool {
+    let mut buf = [0u8; 4];
+    let s = c.encode_utf8(&mut buf);
+    emoji_regex().is_match(s)
+}
+
 /// Similar to `str::split`, but also provides byte-offset ranges of the results. Unlike
 /// `str::split`, this is not generic on pattern types and does not return an `Iterator`.
 pub fn split_str_with_ranges<'s>(
@@ -969,6 +976,27 @@ mod tests {
         }
     }
 
+    #[test]
+    fn test_char_is_emoji() {
+        let chars_to_test = vec![
+            ('👋', true),
+            ('✅', true),
+            ('©', true),
+            ('♥', true),
+            ('a', false),
+            ('Z', false),
+            ('1', false),
+            (' ', false),
+            ('漢', false),
+            ('中', false),
+            ('カ', false),
+        ];
+
+        for (text, expected_result) in chars_to_test {
+            assert_eq!(is_emoji_character(text), expected_result);
+        }
+    }
+
     #[test]
     fn test_truncate_lines_and_trailoff() {
         let text = r#"Line 1
