gpui_component/
icon.rs

1use crate::{ActiveTheme, Sizable, Size};
2use gpui::{
3    prelude::FluentBuilder as _, svg, AnyElement, App, AppContext, Context, Entity, Hsla,
4    IntoElement, Radians, Render, RenderOnce, SharedString, StyleRefinement, Styled, Svg,
5    Transformation, Window,
6};
7
8/// The name of an icon in the asset bundle.
9#[derive(IntoElement, Clone)]
10pub enum IconName {
11    ALargeSmall,
12    ArrowDown,
13    ArrowLeft,
14    ArrowRight,
15    ArrowUp,
16    Asterisk,
17    Bell,
18    BookOpen,
19    Bot,
20    Building2,
21    Calendar,
22    CaseSensitive,
23    ChartPie,
24    Check,
25    ChevronDown,
26    ChevronLeft,
27    ChevronRight,
28    ChevronsUpDown,
29    ChevronUp,
30    CircleCheck,
31    CircleUser,
32    CircleX,
33    Close,
34    Copy,
35    Dash,
36    Delete,
37    Ellipsis,
38    EllipsisVertical,
39    ExternalLink,
40    Eye,
41    EyeOff,
42    File,
43    Folder,
44    FolderClosed,
45    FolderOpen,
46    Frame,
47    GalleryVerticalEnd,
48    GitHub,
49    Globe,
50    Heart,
51    HeartOff,
52    Inbox,
53    Info,
54    Inspector,
55    LayoutDashboard,
56    Loader,
57    LoaderCircle,
58    Map,
59    Maximize,
60    Menu,
61    Minimize,
62    Minus,
63    Moon,
64    Palette,
65    PanelBottom,
66    PanelBottomOpen,
67    PanelLeft,
68    PanelLeftClose,
69    PanelLeftOpen,
70    PanelRight,
71    PanelRightClose,
72    PanelRightOpen,
73    Plus,
74    Replace,
75    ResizeCorner,
76    Search,
77    Settings,
78    Settings2,
79    SortAscending,
80    SortDescending,
81    SquareTerminal,
82    Star,
83    StarOff,
84    Sun,
85    ThumbsDown,
86    ThumbsUp,
87    TriangleAlert,
88    User,
89    WindowClose,
90    WindowMaximize,
91    WindowMinimize,
92    WindowRestore,
93}
94
95impl IconName {
96    pub fn path(self) -> SharedString {
97        match self {
98            Self::ALargeSmall => "icons/a-large-small.svg",
99            Self::ArrowDown => "icons/arrow-down.svg",
100            Self::ArrowLeft => "icons/arrow-left.svg",
101            Self::ArrowRight => "icons/arrow-right.svg",
102            Self::ArrowUp => "icons/arrow-up.svg",
103            Self::Asterisk => "icons/asterisk.svg",
104            Self::Bell => "icons/bell.svg",
105            Self::BookOpen => "icons/book-open.svg",
106            Self::Bot => "icons/bot.svg",
107            Self::Building2 => "icons/building-2.svg",
108            Self::Calendar => "icons/calendar.svg",
109            Self::CaseSensitive => "icons/case-sensitive.svg",
110            Self::ChartPie => "icons/chart-pie.svg",
111            Self::Check => "icons/check.svg",
112            Self::ChevronDown => "icons/chevron-down.svg",
113            Self::ChevronLeft => "icons/chevron-left.svg",
114            Self::ChevronRight => "icons/chevron-right.svg",
115            Self::ChevronsUpDown => "icons/chevrons-up-down.svg",
116            Self::ChevronUp => "icons/chevron-up.svg",
117            Self::CircleCheck => "icons/circle-check.svg",
118            Self::CircleUser => "icons/circle-user.svg",
119            Self::CircleX => "icons/circle-x.svg",
120            Self::Close => "icons/close.svg",
121            Self::Copy => "icons/copy.svg",
122            Self::Dash => "icons/dash.svg",
123            Self::Delete => "icons/delete.svg",
124            Self::Ellipsis => "icons/ellipsis.svg",
125            Self::EllipsisVertical => "icons/ellipsis-vertical.svg",
126            Self::ExternalLink => "icons/external-link.svg",
127            Self::Eye => "icons/eye.svg",
128            Self::EyeOff => "icons/eye-off.svg",
129            Self::File => "icons/file.svg",
130            Self::Folder => "icons/folder.svg",
131            Self::FolderClosed => "icons/folder-closed.svg",
132            Self::FolderOpen => "icons/folder-open.svg",
133            Self::Frame => "icons/frame.svg",
134            Self::GalleryVerticalEnd => "icons/gallery-vertical-end.svg",
135            Self::GitHub => "icons/github.svg",
136            Self::Globe => "icons/globe.svg",
137            Self::Heart => "icons/heart.svg",
138            Self::HeartOff => "icons/heart-off.svg",
139            Self::Inbox => "icons/inbox.svg",
140            Self::Info => "icons/info.svg",
141            Self::Inspector => "icons/inspector.svg",
142            Self::LayoutDashboard => "icons/layout-dashboard.svg",
143            Self::Loader => "icons/loader.svg",
144            Self::LoaderCircle => "icons/loader-circle.svg",
145            Self::Map => "icons/map.svg",
146            Self::Maximize => "icons/maximize.svg",
147            Self::Menu => "icons/menu.svg",
148            Self::Minimize => "icons/minimize.svg",
149            Self::Minus => "icons/minus.svg",
150            Self::Moon => "icons/moon.svg",
151            Self::Palette => "icons/palette.svg",
152            Self::PanelBottom => "icons/panel-bottom.svg",
153            Self::PanelBottomOpen => "icons/panel-bottom-open.svg",
154            Self::PanelLeft => "icons/panel-left.svg",
155            Self::PanelLeftClose => "icons/panel-left-close.svg",
156            Self::PanelLeftOpen => "icons/panel-left-open.svg",
157            Self::PanelRight => "icons/panel-right.svg",
158            Self::PanelRightClose => "icons/panel-right-close.svg",
159            Self::PanelRightOpen => "icons/panel-right-open.svg",
160            Self::Plus => "icons/plus.svg",
161            Self::Replace => "icons/replace.svg",
162            Self::ResizeCorner => "icons/resize-corner.svg",
163            Self::Search => "icons/search.svg",
164            Self::Settings => "icons/settings.svg",
165            Self::Settings2 => "icons/settings-2.svg",
166            Self::SortAscending => "icons/sort-ascending.svg",
167            Self::SortDescending => "icons/sort-descending.svg",
168            Self::SquareTerminal => "icons/square-terminal.svg",
169            Self::Star => "icons/star.svg",
170            Self::StarOff => "icons/star-off.svg",
171            Self::Sun => "icons/sun.svg",
172            Self::ThumbsDown => "icons/thumbs-down.svg",
173            Self::ThumbsUp => "icons/thumbs-up.svg",
174            Self::TriangleAlert => "icons/triangle-alert.svg",
175            Self::User => "icons/user.svg",
176            Self::WindowClose => "icons/window-close.svg",
177            Self::WindowMaximize => "icons/window-maximize.svg",
178            Self::WindowMinimize => "icons/window-minimize.svg",
179            Self::WindowRestore => "icons/window-restore.svg",
180        }
181        .into()
182    }
183
184    /// Return the icon as a Entity<Icon>
185    pub fn view(self, cx: &mut App) -> Entity<Icon> {
186        Icon::build(self).view(cx)
187    }
188}
189
190impl From<IconName> for Icon {
191    fn from(val: IconName) -> Self {
192        Icon::build(val)
193    }
194}
195
196impl From<IconName> for AnyElement {
197    fn from(val: IconName) -> Self {
198        Icon::build(val).into_any_element()
199    }
200}
201
202impl RenderOnce for IconName {
203    fn render(self, _: &mut Window, _cx: &mut App) -> impl IntoElement {
204        Icon::build(self)
205    }
206}
207
208#[derive(IntoElement)]
209pub struct Icon {
210    base: Svg,
211    style: StyleRefinement,
212    path: SharedString,
213    text_color: Option<Hsla>,
214    size: Option<Size>,
215    rotation: Option<Radians>,
216}
217
218impl Default for Icon {
219    fn default() -> Self {
220        Self {
221            base: svg().flex_none().size_4(),
222            style: StyleRefinement::default(),
223            path: "".into(),
224            text_color: None,
225            size: None,
226            rotation: None,
227        }
228    }
229}
230
231impl Clone for Icon {
232    fn clone(&self) -> Self {
233        let mut this = Self::default().path(self.path.clone());
234        this.style = self.style.clone();
235        this.rotation = self.rotation;
236        this.size = self.size;
237        this.text_color = self.text_color;
238        this
239    }
240}
241
242pub trait IconNamed {
243    fn path(&self) -> SharedString;
244}
245
246impl Icon {
247    pub fn new(icon: impl Into<Icon>) -> Self {
248        icon.into()
249    }
250
251    fn build(name: IconName) -> Self {
252        Self::default().path(name.path())
253    }
254
255    /// Set the icon path of the Assets bundle
256    ///
257    /// For example: `icons/foo.svg`
258    pub fn path(mut self, path: impl Into<SharedString>) -> Self {
259        self.path = path.into();
260        self
261    }
262
263    /// Create a new view for the icon
264    pub fn view(self, cx: &mut App) -> Entity<Icon> {
265        cx.new(|_| self)
266    }
267
268    pub fn transform(mut self, transformation: gpui::Transformation) -> Self {
269        self.base = self.base.with_transformation(transformation);
270        self
271    }
272
273    pub fn empty() -> Self {
274        Self::default()
275    }
276
277    /// Rotate the icon by the given angle
278    pub fn rotate(mut self, radians: impl Into<Radians>) -> Self {
279        self.base = self
280            .base
281            .with_transformation(Transformation::rotate(radians));
282        self
283    }
284}
285
286impl Styled for Icon {
287    fn style(&mut self) -> &mut StyleRefinement {
288        &mut self.style
289    }
290
291    fn text_color(mut self, color: impl Into<Hsla>) -> Self {
292        self.text_color = Some(color.into());
293        self
294    }
295}
296
297impl Sizable for Icon {
298    fn with_size(mut self, size: impl Into<Size>) -> Self {
299        self.size = Some(size.into());
300        self
301    }
302}
303
304impl RenderOnce for Icon {
305    fn render(self, window: &mut Window, _cx: &mut App) -> impl IntoElement {
306        let text_color = self.text_color.unwrap_or_else(|| window.text_style().color);
307        let text_size = window.text_style().font_size.to_pixels(window.rem_size());
308        let has_base_size = self.style.size.width.is_some() || self.style.size.height.is_some();
309
310        let mut base = self.base;
311        *base.style() = self.style;
312
313        base.flex_shrink_0()
314            .text_color(text_color)
315            .when(!has_base_size, |this| this.size(text_size))
316            .when_some(self.size, |this, size| match size {
317                Size::Size(px) => this.size(px),
318                Size::XSmall => this.size_3(),
319                Size::Small => this.size_3p5(),
320                Size::Medium => this.size_4(),
321                Size::Large => this.size_6(),
322            })
323            .path(self.path)
324    }
325}
326
327impl From<Icon> for AnyElement {
328    fn from(val: Icon) -> Self {
329        val.into_any_element()
330    }
331}
332
333impl Render for Icon {
334    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
335        let text_color = self.text_color.unwrap_or_else(|| cx.theme().foreground);
336        let text_size = window.text_style().font_size.to_pixels(window.rem_size());
337        let has_base_size = self.style.size.width.is_some() || self.style.size.height.is_some();
338
339        let mut base = svg().flex_none();
340        *base.style() = self.style.clone();
341
342        base.flex_shrink_0()
343            .text_color(text_color)
344            .when(!has_base_size, |this| this.size(text_size))
345            .when_some(self.size, |this, size| match size {
346                Size::Size(px) => this.size(px),
347                Size::XSmall => this.size_3(),
348                Size::Small => this.size_3p5(),
349                Size::Medium => this.size_4(),
350                Size::Large => this.size_6(),
351            })
352            .path(self.path.clone())
353            .when_some(self.rotation, |this, rotation| {
354                this.with_transformation(Transformation::rotate(rotation))
355            })
356    }
357}
gpui_component/icon.rs

gpui_component/
icon.rs
