add ui::Vector and separate images from icons (#17815)

This PR pulls non-icon assets out of `ui::components::icon` in
preparation for icon standardization.

In the future icons will have standard names and sizes, and these image
assets won't conform to those constraints.

We can also add a `ui::components::image::Image` wrapper around the
`gpui::img` element in the future for any Zed-specific image styling we
want to enforce.

Of note:

```rust
#[derive(Debug, PartialEq, Eq, Copy, Clone, EnumIter, EnumString, IntoStaticStr, Serialize, Deserialize, DerivePathStr)]
#[strum(serialize_all = "snake_case")]
#[path_str(prefix = "images", suffix = ".svg")]
pub enum VectorName {
    ZedLogo,
    ZedXCopilot,
}
```

You can see in the above code we no longer need to manually specify
paths for image/icon enums like we currently do in
`ui::components::icon`.

The icon component will get this same treatment in the future, once we:

- do the design work needed to standardize the icons
- remove unused icons
- update icon names

Release Notes:

- N/A

crates/ui/src/components.rs

@@ -7,6 +7,7 @@ mod divider;
 mod dropdown_menu;
 mod facepile;
 mod icon;
+mod image;
 mod indicator;
 mod keybinding;
 mod label;
@@ -37,6 +38,7 @@ pub use divider::*;
 pub use dropdown_menu::*;
 pub use facepile::*;
 pub use icon::*;
+pub use image::*;
 pub use indicator::*;
 pub use keybinding::*;
 pub use label::*;
@@ -55,5 +57,7 @@ pub use tab_bar::*;
 pub use tool_strip::*;
 pub use tooltip::*;
 
+#[cfg(feature = "stories")]
+pub use image::story::*;
 #[cfg(feature = "stories")]
 pub use stories::*;

crates/ui/src/components/icon.rs

@@ -271,7 +271,6 @@ pub enum IconName {
     XCircle,
     ZedAssistant,
     ZedAssistantFilled,
-    ZedXCopilot,
     Visible,
 }
 
@@ -443,7 +442,6 @@ impl IconName {
             IconName::XCircle => "icons/error.svg",
             IconName::ZedAssistant => "icons/zed_assistant.svg",
             IconName::ZedAssistantFilled => "icons/zed_assistant_filled.svg",
-            IconName::ZedXCopilot => "icons/zed_x_copilot.svg",
             IconName::Visible => "icons/visible.svg",
         }
     }

crates/ui/src/components/image.rs

@@ -0,0 +1,115 @@
+use gpui::{svg, IntoElement, Rems, RenderOnce, Size, Styled, WindowContext};
+use serde::{Deserialize, Serialize};
+use strum::{EnumIter, EnumString, IntoStaticStr};
+use ui_macros::{path_str, DerivePathStr};
+
+use crate::Color;
+
+#[derive(
+    Debug,
+    PartialEq,
+    Eq,
+    Copy,
+    Clone,
+    EnumIter,
+    EnumString,
+    IntoStaticStr,
+    Serialize,
+    Deserialize,
+    DerivePathStr,
+)]
+#[strum(serialize_all = "snake_case")]
+#[path_str(prefix = "images", suffix = ".svg")]
+pub enum VectorName {
+    ZedLogo,
+    ZedXCopilot,
+}
+
+/// A vector image, such as an SVG.
+///
+/// A [Vector] is different from an [Icon] in that it is intended
+/// to be displayed at a specific size, or series of sizes, rather
+/// than conforming to the standard size of an icons.
+#[derive(IntoElement)]
+pub struct Vector {
+    path: &'static str,
+    color: Color,
+    size: Size<Rems>,
+}
+
+impl Vector {
+    /// Create a new [Vector] image with the given [VectorName] and size.
+    pub fn new(vector: VectorName, width: Rems, height: Rems) -> Self {
+        Self {
+            path: vector.path(),
+            color: Color::default(),
+            size: Size { width, height },
+        }
+    }
+
+    /// Create a new [Vector] image where the width and height are the same.
+    pub fn square(vector: VectorName, size: Rems) -> Self {
+        Self::new(vector, size, size)
+    }
+
+    /// Set the image color
+    pub fn color(mut self, color: Color) -> Self {
+        self.color = color;
+        self
+    }
+
+    /// Set the image size
+    pub fn size(mut self, size: impl Into<Size<Rems>>) -> Self {
+        let size = size.into();
+
+        self.size = size;
+        self
+    }
+}
+
+impl RenderOnce for Vector {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let width = self.size.width;
+        let height = self.size.height;
+
+        svg()
+            // By default, prevent the SVG from stretching
+            // to fill its container.
+            .flex_none()
+            .w(width)
+            .h(height)
+            .path(self.path)
+            .text_color(self.color.color(cx))
+    }
+}
+
+#[cfg(feature = "stories")]
+pub mod story {
+    use gpui::Render;
+    use story::{Story, StoryItem, StorySection};
+    use strum::IntoEnumIterator;
+
+    use crate::prelude::*;
+
+    use super::{Vector, VectorName};
+
+    pub struct VectorStory;
+
+    impl Render for VectorStory {
+        fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+            Story::container().child(StorySection::new().children(VectorName::iter().map(
+                |vector| StoryItem::new(format!("{:?}", vector), Vector::square(vector, rems(8.))),
+            )))
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn vector_path() {
+        assert_eq!(VectorName::ZedLogo.path(), "images/zed_logo.svg");
+    }
+}