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

gpui_component/
icon.rs
