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

gpui_component/
icon.rs
