Component Icon

Icon

Renders an icon from embedded assets (built-in IconNames) or from an external path string (your own SVG shipped via your AssetSource).

The icon(...) constructor accepts anything that converts into IconPath:

• IconPath::Embeded(IconName) — the 13 universal icons shipped inside yororen-ui-core.
• IconPath::External(SharedString) — any path your AssetSource can load (e.g. "icons/brand-logo.svg").

v0.3: The 5 app-specific IconName variants from v0.2 (Microsoft, Minecraft, Modpack, Server, PingIndicator(usize)) were removed. They are now loaded with IconPath::External(...). See MIGRATION.md.

Example: built-in

use gpui::px;
use yororen_ui::component::{icon, IconName};

let view = icon(IconName::Search).size(px(16.));

Example: external (app-specific)

use gpui::px;
use yororen_ui::component::{icon, IconPath};

let view = icon(IconPath::External("icons/microsoft.svg".into())).size(px(16.));
// Or — `&'static str` / `String` / `SharedString` convert implicitly:
let view = icon("icons/your-icon.svg").size(px(16.));

The path is resolved through your gpui::AssetSource. The simplest setup is to ship the SVG alongside your app and combine it with UiAsset via CompositeAssetSource:

use gpui::Application;
use yororen_ui::assets::{CompositeAssetSource, UiAsset};

struct MyAppAssets;
impl gpui::AssetSource for MyAppAssets { /* load("icons/...") */ }

let app = Application::new()
    .with_assets(CompositeAssetSource::new(MyAppAssets, UiAsset));

When to use

• Inline icons in buttons, labels, menus
• Decoration and status markers

API

• icon(impl Into<IconPath>): constructor. Accepts an IconName, an IconPath, a &'static str, a String, or a SharedString.
• .size(px(...)): icon size (default: tokens.sizes.icon_md, currently 14px).
• .color(Hsla): explicit color
• .inherit_color(bool): when true, do not set a default color (use parent text color)
• .id(...) / .key(...): stable element id

Built-in icons (13)

These resolve to assets/icons/*.svg files inside yororen-ui-core:

IconName	SVG path (relative to asset root)
IconName::Search	icons/search.svg
IconName::Arrow(Up)	icons/arrow-up.svg
IconName::Arrow(Down)	icons/arrow-down.svg
IconName::Arrow(Left)	icons/arrow-left.svg
IconName::Arrow(Right)	icons/arrow-right.svg
IconName::Check	icons/check.svg
IconName::Warning	icons/warning.svg
IconName::Info	icons/info.svg
IconName::Close	icons/close.svg
IconName::Maximize(true)	icons/maximize-on.svg
IconName::Maximize(false)	icons/maximize-off.svg
IconName::Minimize	icons/minimize.svg
IconName::User	icons/user.svg
IconName::Pencil	icons/pencil.svg
IconName::Trash	icons/trash.svg
IconName::File	icons/file.svg
IconName::Folder	icons/folder.svg

The core asset folder also contains a few extra SVGs that aren't exposed through IconName (window controls, progress indicators, …). Reference them via IconPath::External("icons/window-close.svg") etc.

Defaults

• Size: tokens.sizes.icon_md (14px by default). Override per-call with .size(px(...)) or change the default for the whole app by setting theme.tokens.sizes.icon_md in your custom theme.
• Color:
  • if .color(...) is set: use that
  • else if .inherit_color(true): leave color unspecified (inherit from parent)
  • otherwise: use theme.content.primary

Notes

• If neither .color(...) nor .inherit_color(true) is set, Icon uses theme.content.primary.
• Built-in icons require that you provide Yororen UI assets at app startup. See Guide-Quick-Start (assets section).
• The Embeded variant name is intentionally retained (with the spelling used by the source) for backwards source compatibility; new code can ignore the spelling quirk and just pass an IconName to icon(...).

Example: Inherit text color

use gpui::px;
use yororen_ui::component::{icon, text, IconName};

let view = text("Info")
    .text_color(gpui::rgb(0xFF0000).into())
    .with_icon(icon(IconName::Info).size(px(14.)).inherit_color(true));