Component Icon

Icon

Renders an icon from embedded assets (or an external path).

Icons can be created from:

• IconName (built-in SVG assets shipped by Yororen UI)
• an external path string (useful when your app provides its own SVG assets)

Example

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

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

When to use

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

API

• icon(IconName | &str | String | SharedString): constructor
• .size(px(...)): icon size (default: 14px)
• .color(Hsla): explicit color
• .inherit_color(bool): when true, do not set a default color (use parent text color)

Built-in icons

Built-in icons are referenced by IconName and resolve to assets/icons/*.svg.

Defaults

• Size: 14px
• Color:
  • if .color(...) is set: use that
  • else if .inherit_color(true): leave color unspecified (inherit from parent)
  • otherwise: use theme.content.primary

Common ones:

• IconName::Search
• IconName::Close
• IconName::Info / Warning / Check
• IconName::Arrow(ArrowDirection::{Up|Down|Left|Right})

Notes

• If neither .color(...) nor .inherit_color(true) is set, Icon uses theme.content.primary.

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));

Notes

• Built-in icons require that you provide Yororen UI assets at app startup. See Guide-Quick-Start (assets section).