GPUI Kit 图标与资源Icons Assets完全指南按需嵌入、自定义 AssetSource 与二进制体积优化【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kitGPUI Kit 在gpui-component与gpui-kit-assets两个层面提供了一套完整的 Lucide 图标体系本文档源自 website/docs/assets.md将讲解其默认不嵌入任何图标的设计动机、101 个组件默认图标与 1,830 个完整目录的取舍关系、如何注册默认捆绑资源、如何用rust-embed构建只含所需图标的自定义AssetSource以及在原生与 WASM 平台上各自的加载路径。读完本文你将能精确控制应用图标资产的体积开销并能在任意 GPUI 应用中灵活混用共享IconName与自定义 SVG。设计背景为什么默认不嵌入任何图标IconName与Icon是 GPUI Component 提供的完整图标与资源入口可以无缝集成进 GPUI 应用。但对于追求最小二进制体积的应用gpui-componentcrate 默认不嵌入任何图标资产见 crates/assets/src/lib.rs 顶部注释与 crates/assets/Cargo.toml。为此图标资产被拆分到独立的gpui-kit-assetscrate源码位于 crates/assets需要图标的应用依赖gpui-kit-assets选择默认 101 个组件图标或完整目录完全不需要图标的应用可以不依赖该 crate自行构建资源需要私有图标的团队用自定义AssetSource提供自己的 SVG。从 crates/kit/src/lib.rs 可见gpui-kit伞状 crate 通过assetsfeature默认开启将gpui-kit-assets暴露为gpui_kit::assets路径因此你只需一个依赖即可访问全部资产 API。重要澄清依赖 crate 不等于嵌入全部图标完整目录并不会让既有应用嵌入每一个图标。具体规则如下Assets默认资源只保留原始 101 个组件图标这些图标清单记录在 crates/assets/default-icons.txt应用通过自己的AssetSource提供额外图标与之前一致无需重新声明组件图标只有显式注册AllAssets才会在原生平台嵌入全部 1,830 个 SVG仅依赖 crate 或单独使用共享的IconName不会引用每个 SVG 的载荷。这一行为由 crates/assets/tests/icons.rs 中的测试直接验证default_assets_preserve_the_component_bundle_without_all_lucide_icons断言Assets.list(icons/)与default-icons.txt完全一致且长度为 101并确认Assets::get(icons/accessibility.svg).is_none()该图标不在默认集合中而AllAssets.load(icons/accessibility.svg).is_some()every_named_icon_is_available_in_the_asset_source断言IconName::ALL枚举的 1,830 个名字与AllAssets.list(icons/)一一对应且每个 SVG 均以svg开头。实测体积数据下表为源码文档中给出的原生平台二进制体积测量默认Assets为基线原生资源配置嵌入的 SVG 数据相对默认Assets的二进制增量默认组件图标101 个44.28 KiB0 B基线默认 2 个应用图标103 个45.04 KiB15.19 KiB默认 10 个应用图标111 个48.09 KiB19.19 KiB显式AllAssets1,830 个731.45 KiB1.02 MiB结论增加 10 个应用图标大约只增加 19 KiB而不是整个目录的体积。这 10 个 SVG 原始大小合计 3,903 字节实测二进制增量为 19,648 字节——多出的部分来自额外资源源的查找/列表组合代码、元数据与对齐。这并非固定的每图标成本或整个应用的大小。测量条件Lucide 1.43.0Linux x86_64Rust 1.98.0--release且剥离符号每个程序使用相同的IconName查找与运行时资产路径额外资源源回退到Assets并对两个来源的列表做合并、排序与去重。10 个额外图标为Accessibility、AlarmClock、Archive、Award、Backpack、Bike、Bird、Camera、Coffee、Compass双图标场景使用前两个。注意SVG 复杂度、工具链与源码实现都会改变结果。值得强调的是二进制大小不等于 RAM 占用。被选中的资源源直接借用静态字节Cow::Borrowed见 crates/assets/src/lib.rs 的icon_assets!宏不复制、不缓存实际渲染仍会为解析、栅格化与渲染缓存分配内存。运行时共享名查找可能保留一张名称/路径表且 Cargo 下载的包与构建产物中仍包含完整目录。WASM 上不使用内嵌。Assets::new(endpoint)与AllAssets::new(endpoint)在 WASM 平台走的是既有的按需 CDN 加载器见下文平台差异而非嵌入完整 bundle。共享名称与兼容性gpui_kit::assets::IconName提供完整的共享目录且不依赖 Component 层见 crates/assets/src/icon.rs 中独立的IconNamedtrait。而gpui_kit::component::IconName仍是原始兼容枚举既有的导入、穷尽匹配exhaustive match与.view(cx)调用无需引入新 trait 即可继续工作。Icon::new(...)两种类型都接受旧枚举值可通过.into()转换为共享枚举。使用方式区分需要组件实体component entity时Icon::new(name).view(cx)直接调用name.view(cx)导入gpui_kit::component::IconNameExt。关键 APIIconName::ALL枚举全部 1,830 个名称IconName::Accessibility.path()返回icons/accessibility.svg默认资源源仅含原始 101 个组件图标额外图标需用下文的自定义资源源或显式注册AllAssets使用完整 bundle。从源码看IconName还实现了RenderOncecrates/assets/src/icon.rs可以直接作为子元素渲染它按当前窗口字体大小设置 SVG 尺寸、继承文字颜色并使用svg().path(...)解析路径。测试shared_names_work_without_component也证实共享名称在无 Component 依赖时即可转换为AnyElement。使用默认捆绑资产gpui-kit-assetscrate 提供默认捆绑资源实现内嵌default-icons.txt所列的原始 101 个组件图标。在Cargo.toml中声明依赖[dependencies] gpui-component { git https://github.com/longbridge/gpui-kit } gpui-kit-assets { git https://github.com/longbridge/gpui-kit }然后在创建 GPUI 应用时调用with_assets注册资源源use gpui_kit::*; use gpui_kit::assets::Assets; let app gpui_kit::application().with_assets(Assets);注册之后IconName与Icon即可照常使用组件图标会从默认 bundle 中加载。使用方式见下文使用图标一节。平台差异原生与 WASM 的不同实现crates/assets/src/lib.rs 通过#[cfg]按平台选择实现原生桌面Assets/AllAssets用rust-embed把图标内嵌进二进制crates/assets/src/native_assets.rsAssetSource::load直接Self::get(path)返回静态字节WASMWebAssets::new(endpoint)使用web_sys::Request从 CDN 按需下载crates/assets/src/wasm_assets.rs显著减小 WASM bundle 体积图标在首次使用时才下载已下载图标缓存在内存HashMap中cache字段未完成下载用pending集合去重避免同一图标重复发起请求。WASM 端load对未缓存的图标返回ErrGPUI 会稍后重试下载完成后再次加载即可命中缓存。因此把Assets用在 WASM 时请传入 CDN endpoint如Assets::new(https://your-cdn)资源会按{endpoint}/assets/{path}拉取。平台差异icon_assets!宏原生平台还可以用gpui_kit::assets::icon_assets!宏crates/assets/src/lib.rs只内嵌选中图标use gpui_kit::assets::{icon_assets, IconName}; icon_assets!(AppAssets, [Search, Check]); // gpui_kit::application().with_assets(AppAssets)宏生成的资源源对未列出的路径返回Ok(None)选中图标的 SVG 字节直接借用静态存储不复制、不构建运行时缓存。测试selected_assets_only_expose_requested_icons验证了list只返回选中的图标含前缀过滤、未选中图标load返回Noneempty_selection_is_a_valid_asset_source则证明空选择也是合法的资源源。由于它只含选中图标使用组件的应用可把它与Assets组合以保留默认图标见下文组合模式。构建你自己的资源自定义 AssetSource你可能拥有一套特定的图标或希望只包含所需图标来减小应用二进制体积。crates/assets/assets/目录即 crates/assets/assets存放了所有可用 SVG 图标每个文件都是 GPUI Component 支持的与IconName枚举一一对应。你可以从该目录下载所需 SVG 文件或按照IconName命名约定使用自己的 SVG 文件例如icons/search.svg↔IconName::Search。在 GPUI 应用中用rust-embedcrate 将 SVG 嵌入二进制并通过 GPUI 提供的AssetSourcetrait 加载。自定义资源源的完整示例use gpui_kit::*; use gpui_kit::assets::Assets as ComponentAssets; use gpui_kit::component::{v_flex, IconName, Root}; use rust_embed::RustEmbed; use std::borrow::Cow; /// An asset source that loads assets from the ./assets folder. #[derive(RustEmbed)] #[folder ./assets] #[include icons/**/*.svg] pub struct Assets; impl AssetSource for Assets { fn load(self, path: str) - ResultOptionCowstatic, [u8] { if path.is_empty() { return Ok(None); } if let Some(file) Self::get(path) { return Ok(Some(file.data)); } ComponentAssets.load(path) } fn list(self, path: str) - ResultVecSharedString { let mut paths ComponentAssets.list(path)?; paths.extend(Self::iter().filter_map(|p| p.starts_with(path).then(|| p.into()))); paths.sort(); paths.dedup(); Ok(paths) } }关键点load先查自己的嵌入图标查不到就回退到ComponentAssets默认 101 个组件图标保证组件内部图标不缺失list把默认资源与自定义资源的路径合并、排序、去重使上层既能枚举完整可用列表又不会出现重复路径空路径返回Ok(None)与gpui-kit-assets内置实现crates/assets/src/native_assets.rs保持一致。然后创建应用并注册fn main() { // Register Assets to GPUI application. let app gpui_kit::application().with_assets(Assets); app.run(move |cx| { // We must initialize gpui_component before using it. gpui_kit::init(cx); cx.spawn(async move |cx| { cx.open_window(WindowOptions::default(), |window, cx| { let view cx.new(|_| Example); // The first level on the window must be Root. cx.new(|cx| Root::new(view, window, cx)) }) .expect(Failed to open window); }) .detach(); }); }注意gpui_kit::init(cx)必须在使用组件前调用crates/kit/src/lib.rs 的init会按 feature 初始化gpui-component或gpui-base窗口第一层必须是Root。仓库中还提供了可直接运行的三档示例对应本节的三种资源策略位于 crates/assets/examplesextra_assets.rs用icon_assets!选择 10 个额外图标并组合默认Assets即文档体积表中所测场景的源码实现full_assets.rs注册AllAssets使用完整 1,830 个图标selected_assets.rs仅嵌入选中的少量图标。使用图标注册资源源后即可在视图渲染中使用图标pub struct Example; impl Render for Example { fn render(mut self, _: mut Window, _: mut ContextSelf) - impl IntoElement { v_flex() .gap_2() .size_full() .items_center() .justify_center() .text_center() .child(IconName::Inbox) .child(IconName::Bot) } }IconName值可直接作为child因为实现了RenderOnce见 crates/assets/src/icon.rs需要更精细的尺寸、颜色与变换控制时改用Icon::new(name)组件形式。直接嵌入单个 SVG 图标对于自定义图标Icon::data可以直接接受 SVG 字节无需经过资产路径注册表use gpui_kit::component::{Icon, button::Button}; Button::new(search) .icon(Icon::default().data(include_bytes!(search.svg))) .label(Search)这种方式仅省去该图标的资产查找。内置IconName值与其他基于路径的组件图标仍需要资产源。关于所有权、资源替换、图标加载与自定义图标类型的更多说明参见 Icon 组件文档。小结GPUI Kit 的图标资源体系围绕按需引入、按量付费设计默认 101 个组件图标约 44 KiB零额外成本追加 10 个应用图标约增加 19 KiB而完整 1,830 图标目录仅在选择AllAssets时才会全部嵌入约 731 KiB 数据、二进制约 1.02 MiB。通过AssetSourcetrait 与rust-embed你可以自由组合默认 bundle、宏选中的图标与自有 SVG在 WASM 上同一套 API 自动切换到 CDN 按需加载进一步压减 Web 端 bundle 体积。完整的图标清单见 crates/assets/default-icons.txt资源源行为由 crates/assets/tests/icons.rs 中的测试保障。【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 GPUI Kit 图标与资源（Icons Assets）完全指南：按需嵌入、自定义 AssetSource 与二进制体积优化
GPUI Kit 图标与资源Icons Assets完全指南按需嵌入、自定义 AssetSource 与二进制体积优化【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kitGPUI Kit 在gpui-component与gpui-kit-assets两个层面提供了一套完整的 Lucide 图标体系本文档源自 website/docs/assets.md将讲解其默认不嵌入任何图标的设计动机、101 个组件默认图标与 1,830 个完整目录的取舍关系、如何注册默认捆绑资源、如何用rust-embed构建只含所需图标的自定义AssetSource以及在原生与 WASM 平台上各自的加载路径。读完本文你将能精确控制应用图标资产的体积开销并能在任意 GPUI 应用中灵活混用共享IconName与自定义 SVG。设计背景为什么默认不嵌入任何图标IconName与Icon是 GPUI Component 提供的完整图标与资源入口可以无缝集成进 GPUI 应用。但对于追求最小二进制体积的应用gpui-componentcrate 默认不嵌入任何图标资产见 crates/assets/src/lib.rs 顶部注释与 crates/assets/Cargo.toml。为此图标资产被拆分到独立的gpui-kit-assetscrate源码位于 crates/assets需要图标的应用依赖gpui-kit-assets选择默认 101 个组件图标或完整目录完全不需要图标的应用可以不依赖该 crate自行构建资源需要私有图标的团队用自定义AssetSource提供自己的 SVG。从 crates/kit/src/lib.rs 可见gpui-kit伞状 crate 通过assetsfeature默认开启将gpui-kit-assets暴露为gpui_kit::assets路径因此你只需一个依赖即可访问全部资产 API。重要澄清依赖 crate 不等于嵌入全部图标完整目录并不会让既有应用嵌入每一个图标。具体规则如下Assets默认资源只保留原始 101 个组件图标这些图标清单记录在 crates/assets/default-icons.txt应用通过自己的AssetSource提供额外图标与之前一致无需重新声明组件图标只有显式注册AllAssets才会在原生平台嵌入全部 1,830 个 SVG仅依赖 crate 或单独使用共享的IconName不会引用每个 SVG 的载荷。这一行为由 crates/assets/tests/icons.rs 中的测试直接验证default_assets_preserve_the_component_bundle_without_all_lucide_icons断言Assets.list(icons/)与default-icons.txt完全一致且长度为 101并确认Assets::get(icons/accessibility.svg).is_none()该图标不在默认集合中而AllAssets.load(icons/accessibility.svg).is_some()every_named_icon_is_available_in_the_asset_source断言IconName::ALL枚举的 1,830 个名字与AllAssets.list(icons/)一一对应且每个 SVG 均以svg开头。实测体积数据下表为源码文档中给出的原生平台二进制体积测量默认Assets为基线原生资源配置嵌入的 SVG 数据相对默认Assets的二进制增量默认组件图标101 个44.28 KiB0 B基线默认 2 个应用图标103 个45.04 KiB15.19 KiB默认 10 个应用图标111 个48.09 KiB19.19 KiB显式AllAssets1,830 个731.45 KiB1.02 MiB结论增加 10 个应用图标大约只增加 19 KiB而不是整个目录的体积。这 10 个 SVG 原始大小合计 3,903 字节实测二进制增量为 19,648 字节——多出的部分来自额外资源源的查找/列表组合代码、元数据与对齐。这并非固定的每图标成本或整个应用的大小。测量条件Lucide 1.43.0Linux x86_64Rust 1.98.0--release且剥离符号每个程序使用相同的IconName查找与运行时资产路径额外资源源回退到Assets并对两个来源的列表做合并、排序与去重。10 个额外图标为Accessibility、AlarmClock、Archive、Award、Backpack、Bike、Bird、Camera、Coffee、Compass双图标场景使用前两个。注意SVG 复杂度、工具链与源码实现都会改变结果。值得强调的是二进制大小不等于 RAM 占用。被选中的资源源直接借用静态字节Cow::Borrowed见 crates/assets/src/lib.rs 的icon_assets!宏不复制、不缓存实际渲染仍会为解析、栅格化与渲染缓存分配内存。运行时共享名查找可能保留一张名称/路径表且 Cargo 下载的包与构建产物中仍包含完整目录。WASM 上不使用内嵌。Assets::new(endpoint)与AllAssets::new(endpoint)在 WASM 平台走的是既有的按需 CDN 加载器见下文平台差异而非嵌入完整 bundle。共享名称与兼容性gpui_kit::assets::IconName提供完整的共享目录且不依赖 Component 层见 crates/assets/src/icon.rs 中独立的IconNamedtrait。而gpui_kit::component::IconName仍是原始兼容枚举既有的导入、穷尽匹配exhaustive match与.view(cx)调用无需引入新 trait 即可继续工作。Icon::new(...)两种类型都接受旧枚举值可通过.into()转换为共享枚举。使用方式区分需要组件实体component entity时Icon::new(name).view(cx)直接调用name.view(cx)导入gpui_kit::component::IconNameExt。关键 APIIconName::ALL枚举全部 1,830 个名称IconName::Accessibility.path()返回icons/accessibility.svg默认资源源仅含原始 101 个组件图标额外图标需用下文的自定义资源源或显式注册AllAssets使用完整 bundle。从源码看IconName还实现了RenderOncecrates/assets/src/icon.rs可以直接作为子元素渲染它按当前窗口字体大小设置 SVG 尺寸、继承文字颜色并使用svg().path(...)解析路径。测试shared_names_work_without_component也证实共享名称在无 Component 依赖时即可转换为AnyElement。使用默认捆绑资产gpui-kit-assetscrate 提供默认捆绑资源实现内嵌default-icons.txt所列的原始 101 个组件图标。在Cargo.toml中声明依赖[dependencies] gpui-component { git https://github.com/longbridge/gpui-kit } gpui-kit-assets { git https://github.com/longbridge/gpui-kit }然后在创建 GPUI 应用时调用with_assets注册资源源use gpui_kit::*; use gpui_kit::assets::Assets; let app gpui_kit::application().with_assets(Assets);注册之后IconName与Icon即可照常使用组件图标会从默认 bundle 中加载。使用方式见下文使用图标一节。平台差异原生与 WASM 的不同实现crates/assets/src/lib.rs 通过#[cfg]按平台选择实现原生桌面Assets/AllAssets用rust-embed把图标内嵌进二进制crates/assets/src/native_assets.rsAssetSource::load直接Self::get(path)返回静态字节WASMWebAssets::new(endpoint)使用web_sys::Request从 CDN 按需下载crates/assets/src/wasm_assets.rs显著减小 WASM bundle 体积图标在首次使用时才下载已下载图标缓存在内存HashMap中cache字段未完成下载用pending集合去重避免同一图标重复发起请求。WASM 端load对未缓存的图标返回ErrGPUI 会稍后重试下载完成后再次加载即可命中缓存。因此把Assets用在 WASM 时请传入 CDN endpoint如Assets::new(https://your-cdn)资源会按{endpoint}/assets/{path}拉取。平台差异icon_assets!宏原生平台还可以用gpui_kit::assets::icon_assets!宏crates/assets/src/lib.rs只内嵌选中图标use gpui_kit::assets::{icon_assets, IconName}; icon_assets!(AppAssets, [Search, Check]); // gpui_kit::application().with_assets(AppAssets)宏生成的资源源对未列出的路径返回Ok(None)选中图标的 SVG 字节直接借用静态存储不复制、不构建运行时缓存。测试selected_assets_only_expose_requested_icons验证了list只返回选中的图标含前缀过滤、未选中图标load返回Noneempty_selection_is_a_valid_asset_source则证明空选择也是合法的资源源。由于它只含选中图标使用组件的应用可把它与Assets组合以保留默认图标见下文组合模式。构建你自己的资源自定义 AssetSource你可能拥有一套特定的图标或希望只包含所需图标来减小应用二进制体积。crates/assets/assets/目录即 crates/assets/assets存放了所有可用 SVG 图标每个文件都是 GPUI Component 支持的与IconName枚举一一对应。你可以从该目录下载所需 SVG 文件或按照IconName命名约定使用自己的 SVG 文件例如icons/search.svg↔IconName::Search。在 GPUI 应用中用rust-embedcrate 将 SVG 嵌入二进制并通过 GPUI 提供的AssetSourcetrait 加载。自定义资源源的完整示例use gpui_kit::*; use gpui_kit::assets::Assets as ComponentAssets; use gpui_kit::component::{v_flex, IconName, Root}; use rust_embed::RustEmbed; use std::borrow::Cow; /// An asset source that loads assets from the ./assets folder. #[derive(RustEmbed)] #[folder ./assets] #[include icons/**/*.svg] pub struct Assets; impl AssetSource for Assets { fn load(self, path: str) - ResultOptionCowstatic, [u8] { if path.is_empty() { return Ok(None); } if let Some(file) Self::get(path) { return Ok(Some(file.data)); } ComponentAssets.load(path) } fn list(self, path: str) - ResultVecSharedString { let mut paths ComponentAssets.list(path)?; paths.extend(Self::iter().filter_map(|p| p.starts_with(path).then(|| p.into()))); paths.sort(); paths.dedup(); Ok(paths) } }关键点load先查自己的嵌入图标查不到就回退到ComponentAssets默认 101 个组件图标保证组件内部图标不缺失list把默认资源与自定义资源的路径合并、排序、去重使上层既能枚举完整可用列表又不会出现重复路径空路径返回Ok(None)与gpui-kit-assets内置实现crates/assets/src/native_assets.rs保持一致。然后创建应用并注册fn main() { // Register Assets to GPUI application. let app gpui_kit::application().with_assets(Assets); app.run(move |cx| { // We must initialize gpui_component before using it. gpui_kit::init(cx); cx.spawn(async move |cx| { cx.open_window(WindowOptions::default(), |window, cx| { let view cx.new(|_| Example); // The first level on the window must be Root. cx.new(|cx| Root::new(view, window, cx)) }) .expect(Failed to open window); }) .detach(); }); }注意gpui_kit::init(cx)必须在使用组件前调用crates/kit/src/lib.rs 的init会按 feature 初始化gpui-component或gpui-base窗口第一层必须是Root。仓库中还提供了可直接运行的三档示例对应本节的三种资源策略位于 crates/assets/examplesextra_assets.rs用icon_assets!选择 10 个额外图标并组合默认Assets即文档体积表中所测场景的源码实现full_assets.rs注册AllAssets使用完整 1,830 个图标selected_assets.rs仅嵌入选中的少量图标。使用图标注册资源源后即可在视图渲染中使用图标pub struct Example; impl Render for Example { fn render(mut self, _: mut Window, _: mut ContextSelf) - impl IntoElement { v_flex() .gap_2() .size_full() .items_center() .justify_center() .text_center() .child(IconName::Inbox) .child(IconName::Bot) } }IconName值可直接作为child因为实现了RenderOnce见 crates/assets/src/icon.rs需要更精细的尺寸、颜色与变换控制时改用Icon::new(name)组件形式。直接嵌入单个 SVG 图标对于自定义图标Icon::data可以直接接受 SVG 字节无需经过资产路径注册表use gpui_kit::component::{Icon, button::Button}; Button::new(search) .icon(Icon::default().data(include_bytes!(search.svg))) .label(Search)这种方式仅省去该图标的资产查找。内置IconName值与其他基于路径的组件图标仍需要资产源。关于所有权、资源替换、图标加载与自定义图标类型的更多说明参见 Icon 组件文档。小结GPUI Kit 的图标资源体系围绕按需引入、按量付费设计默认 101 个组件图标约 44 KiB零额外成本追加 10 个应用图标约增加 19 KiB而完整 1,830 图标目录仅在选择AllAssets时才会全部嵌入约 731 KiB 数据、二进制约 1.02 MiB。通过AssetSourcetrait 与rust-embed你可以自由组合默认 bundle、宏选中的图标与自有 SVG在 WASM 上同一套 API 自动切换到 CDN 按需加载进一步压减 Web 端 bundle 体积。完整的图标清单见 crates/assets/default-icons.txt资源源行为由 crates/assets/tests/icons.rs 中的测试保障。【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考