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
2024-11-22 18:53:29 +03:00 · 2024-09-13 17:44:16 -04:00 · 2024-09-13 17:44:16 -04:00 · ce848375fe
commit ce848375fe
parent fac9ee5f86
11 changed files with 231 additions and 10 deletions
--- a/assets/images/zed_logo.svg
+++ b/assets/images/zed_logo.svg
@ -0,0 +1,10 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1957_1318)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6C7.34315 6 6 7.34315 6 9V75H0V9C0 4.02944 4.02944 0 9 0H89.3787C93.3878 0 95.3955 4.84715 92.5607 7.68198L43.0551 57.1875H57V51H63V58.6875C63 61.1728 60.9853 63.1875 58.5 63.1875H37.0551L26.7426 73.5H73.5V36H79.5V73.5C79.5 76.8137 76.8137 79.5 73.5 79.5H20.7426L10.2426 90H87C88.6569 90 90 88.6569 90 87V21H96V87C96 91.9706 91.9706 96 87 96H6.62132C2.61224 96 0.604504 91.1529 3.43934 88.318L52.7574 39H39V45H33V37.5C33 35.0147 35.0147 33 37.5 33H58.7574L69.2574 22.5H22.5V60H16.5V22.5C16.5 19.1863 19.1863 16.5 22.5 16.5H75.2574L85.7574 6H9Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1957_1318">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/zed_x_copilot.svg
+++ b/assets/images/zed_x_copilot.svg
@ -0,0 +1,14 @@
+<svg width="93" height="32" viewBox="0 0 93 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.03994 7.04962C8.00934 7.67635 7.30394 8.63219 7.30394 10.0149C7.30394 11.6908 7.72423 12.5893 8.20468 13.0744C8.68379 13.5581 9.40524 13.8149 10.4054 13.8149C11.815 13.8149 13.0291 13.5336 13.8802 12.9464C14.6756 12.3977 15.2708 11.5042 15.3438 9.96182C15.3991 8.79382 15.3678 8.01341 15.0568 7.45711C14.8094 7.01449 14.2326 6.47436 12.4901 6.27416C11.4684 6.15678 10.1114 6.39804 9.03994 7.04962ZM7.8731 5.13084C9.39145 4.2075 11.2531 3.87155 12.7464 4.04312C14.8843 4.28874 16.2844 5.05049 17.0171 6.36142C17.6863 7.55867 17.6384 8.98348 17.587 10.068C17.484 12.2439 16.5804 13.8118 15.1554 14.7949C13.7861 15.7396 12.0582 16.0606 10.4054 16.0606C9.04199 16.0606 7.65126 15.7069 6.60911 14.6547C5.5683 13.6038 5.05823 12.0408 5.05823 10.0149C5.05823 7.6958 6.31388 6.07903 7.8731 5.13084Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.983 18.2811C14.6595 18.2811 15.2079 18.8295 15.2079 19.506V22.16C15.2079 22.8365 14.6595 23.385 13.983 23.385C13.3065 23.385 12.758 22.8365 12.758 22.16V19.506C12.758 18.8295 13.3065 18.2811 13.983 18.2811Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25567 14.8903C5.48362 14.039 5.99219 12.9059 7.20735 12.5361L7.92069 14.8798L7.92376 14.8785C7.92375 14.8785 7.92323 14.8778 7.92069 14.8798C7.91365 14.8852 7.89134 14.9052 7.85879 14.951C7.78817 15.0505 7.70058 15.2311 7.62217 15.524C7.46355 16.1164 7.40615 16.9168 7.40617 17.7813V22.1675C7.43457 22.3571 7.45083 22.438 7.48149 22.5189C7.50698 22.5862 7.55955 22.695 7.72277 22.8617C8.0938 23.2406 8.94056 23.8264 10.9275 24.7081C12.5399 25.4236 13.2749 25.7456 13.9586 25.9166C14.6053 26.0784 15.2382 26.1115 16.6666 26.1115V28.5613C15.2536 28.5613 14.3395 28.5372 13.3641 28.2932C12.452 28.0651 11.5174 27.6502 10.0614 27.004C10.0193 26.9853 9.9768 26.9664 9.93383 26.9474C7.89761 26.0438 6.6867 25.3053 5.97233 24.5757C5.59285 24.1882 5.34579 23.7967 5.19056 23.387C5.05419 23.0271 5.00551 22.6875 4.9751 22.4754C4.97301 22.4608 4.971 22.4468 4.96906 22.4335L4.9563 22.3458V17.7814C4.95628 16.8606 5.01201 15.8003 5.25567 14.8903Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.98306 15.3589C4.62844 14.6695 5.39976 13.9884 5.99652 13.6348L7.24552 15.7424C6.93706 15.9252 6.34938 16.4159 5.77155 17.0332C5.21994 17.6224 4.85695 18.1377 4.73071 18.4254C4.70277 18.6674 4.71195 19.116 4.78977 19.648C4.87834 20.2536 5.01731 20.7033 5.10492 20.8628L5.19261 21.0224L5.23006 21.2007C5.28661 21.4698 5.55952 21.8651 6.30146 22.3907C6.88143 22.8015 7.56502 23.1703 8.29605 23.5648C8.45794 23.6521 8.62215 23.7407 8.78809 23.8313C9.5952 24.2156 10.848 24.7773 12.0191 25.2425C12.613 25.4784 13.1698 25.6831 13.6288 25.8268C13.8584 25.8987 14.0505 25.9512 14.2021 25.9847C14.3503 26.0175 14.4185 26.0227 14.4277 26.0234C14.4288 26.0234 14.4281 26.0234 14.4277 26.0234L14.4287 28.4733C13.9646 28.4733 13.3889 28.3188 12.8968 28.1648C12.3562 27.9955 11.7367 27.7664 11.1147 27.5193C9.86871 27.0244 8.54832 26.4314 7.70298 26.028L7.67249 26.0135L7.64284 25.9973C7.49779 25.918 7.34502 25.8357 7.18702 25.7506C6.4505 25.354 5.60004 24.896 4.88539 24.3898C4.08363 23.8219 3.18153 23.0135 2.87437 21.8785C2.61828 21.3365 2.4557 20.618 2.3657 20.0026C2.26537 19.3167 2.2169 18.4951 2.33888 17.8727L2.35434 17.7938L2.37996 17.7176C2.6522 16.9085 3.36219 16.0221 3.98306 15.3589Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.48529 21.264V17.1402H5.93516V21.264H3.48529Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2932 7.04962C25.3238 7.67635 26.0292 8.63219 26.0292 10.0149C26.0292 11.6908 25.609 12.5893 25.1285 13.0744C24.6494 13.5581 23.9279 13.8149 22.9278 13.8149C21.5182 13.8149 20.3041 13.5336 19.453 12.9464C18.6576 12.3977 18.0624 11.5042 17.9894 9.96182C17.9341 8.79382 17.9654 8.01341 18.2764 7.45711C18.5238 7.01449 19.1006 6.47436 20.8431 6.27416C21.8648 6.15678 23.2218 6.39804 24.2932 7.04962ZM25.4601 5.13084C23.9417 4.2075 22.0801 3.87155 20.5868 4.04312C18.4489 4.28874 17.0488 5.05049 16.3161 6.36142C15.6469 7.55867 15.6948 8.98348 15.7462 10.068C15.8492 12.2439 16.7528 13.8118 18.1778 14.7949C19.5471 15.7396 21.275 16.0606 22.9278 16.0606C24.2912 16.0606 25.6819 15.7069 26.7241 14.6547C27.7649 13.6038 28.275 12.0408 28.275 10.0149C28.275 7.6958 27.0193 6.07903 25.4601 5.13084Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3502 18.2811C18.6737 18.2811 18.1253 18.8295 18.1253 19.506V22.16C18.1253 22.8365 18.6737 23.385 19.3502 23.385C20.0267 23.385 20.5752 22.8365 20.5752 22.16V19.506C20.5752 18.8295 20.0267 18.2811 19.3502 18.2811Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0775 14.8903C27.8496 14.039 27.341 12.9059 26.1259 12.5361L25.4125 14.8798L25.4095 14.8785C25.4095 14.8785 25.41 14.8778 25.4125 14.8798C25.4196 14.8852 25.4419 14.9052 25.4744 14.951C25.545 15.0505 25.6326 15.2311 25.711 15.524C25.8697 16.1164 25.9271 16.9168 25.927 17.7813V22.1675C25.8986 22.3571 25.8824 22.438 25.8517 22.5189C25.8262 22.5862 25.7737 22.695 25.6104 22.8617C25.2394 23.2406 24.3927 23.8264 22.4057 24.7081C20.7933 25.4236 20.0583 25.7456 19.3746 25.9166C18.7279 26.0784 18.0949 26.1115 16.6666 26.1115V28.5613C18.0796 28.5613 18.9937 28.5372 19.9691 28.2932C20.8812 28.0651 21.8158 27.6502 23.2718 27.004C23.3139 26.9853 23.3564 26.9664 23.3994 26.9474C25.4356 26.0438 26.6465 25.3053 27.3609 24.5757C27.7404 24.1882 27.9874 23.7967 28.1427 23.387C28.279 23.0271 28.3277 22.6875 28.3581 22.4754C28.3602 22.4608 28.3622 22.4468 28.3642 22.4335L28.3769 22.3458V17.7814C28.3769 16.8606 28.3212 15.8003 28.0775 14.8903Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.3501 15.3589C28.7048 14.6695 27.9334 13.9884 27.3367 13.6348L26.0877 15.7424C26.3961 15.9252 26.9838 16.4159 27.5616 17.0332C28.1133 17.6224 28.4763 18.1377 28.6025 18.4254C28.6304 18.6674 28.6213 19.116 28.5434 19.648C28.4549 20.2536 28.3159 20.7033 28.2283 20.8628L28.1406 21.0224L28.1031 21.2007C28.0466 21.4698 27.7737 21.8651 27.0317 22.3907C26.4518 22.8015 25.7682 23.1703 25.0372 23.5648C24.8753 23.6521 24.711 23.7407 24.5451 23.8313C23.738 24.2156 22.4852 24.7773 21.3141 25.2425C20.7202 25.4784 20.1634 25.6831 19.7044 25.8268C19.4748 25.8987 19.2827 25.9512 19.1311 25.9847C18.9829 26.0175 18.9147 26.0227 18.9055 26.0234C18.9051 26.0234 18.9044 26.0234 18.9055 26.0234L18.9045 28.4733C19.3686 28.4733 19.9443 28.3188 20.4364 28.1648C20.977 27.9955 21.5965 27.7664 22.2185 27.5193C23.4645 27.0244 24.7849 26.4314 25.6302 26.028L25.6607 26.0135L25.6904 25.9973C25.8354 25.918 25.9882 25.8357 26.1462 25.7506C26.8827 25.354 27.7332 24.896 28.4478 24.3898C29.2496 23.8219 30.1517 23.0135 30.4588 21.8785C30.7149 21.3365 30.8775 20.618 30.9675 20.0026C31.0678 19.3167 31.1163 18.4951 30.9943 17.8727L30.9789 17.7938L30.9532 17.7176C30.681 16.9085 29.971 16.0221 29.3501 15.3589Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8479 21.264V17.1402H27.398V21.264H29.8479Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.6666 11C49.2189 11 49.6666 11.4477 49.6666 12V15H52.6666C53.2189 15 53.6666 15.4477 53.6666 16C53.6666 16.5523 53.2189 17 52.6666 17H49.6666V20C49.6666 20.5523 49.2189 21 48.6666 21C48.1143 21 47.6666 20.5523 47.6666 20V17H44.6666C44.1143 17 43.6666 16.5523 43.6666 16C43.6666 15.4477 44.1143 15 44.6666 15H47.6666V12C47.6666 11.4477 48.1143 11 48.6666 11Z" fill="black" fill-opacity="0.5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.1666 4.33329C66.7064 4.33329 66.3333 4.70639 66.3333 5.16663V23.5H64.6666V5.16663C64.6666 3.78591 65.7859 2.66663 67.1666 2.66663H89.494C90.6077 2.66663 91.1654 4.01306 90.3779 4.80051L76.6264 18.552H80.5V16.8333H82.1666V18.9687C82.1666 19.6591 81.607 20.2187 80.9166 20.2187H74.9597L72.0951 23.0833H85.0833V12.6666H86.75V23.0833C86.75 24.0038 86.0038 24.75 85.0833 24.75H70.4285L67.5118 27.6666H88.8333C89.2935 27.6666 89.6666 27.2935 89.6666 26.8333V8.49996H91.3333V26.8333C91.3333 28.214 90.214 29.3333 88.8333 29.3333H66.5059C65.3922 29.3333 64.8345 27.9869 65.622 27.1994L79.3214 13.5H75.5V15.1666H73.8333V13.0833C73.8333 12.3929 74.3929 11.8333 75.0833 11.8333H80.9881L83.9048 8.91663H70.9166V19.3333H69.25V8.91663C69.25 7.99615 69.9962 7.24996 70.9166 7.24996H85.5714L88.4881 4.33329H67.1666Z" fill="black"/>
+</svg>
--- a/crates/assets/src/assets.rs
+++ b/crates/assets/src/assets.rs
@ -8,6 +8,7 @@ use rust_embed::RustEmbed;
 #[folder = "../../assets"]
 #[include = "fonts/**/*"]
 #[include = "icons/**/*"]
+#[include = "images/**/*"]
 #[include = "themes/**/*"]
 #[exclude = "themes/src/*"]
 #[include = "sounds/**/*"]
--- a/crates/copilot/src/sign_in.rs
+++ b/crates/copilot/src/sign_in.rs
@ -1,10 +1,10 @@
 use crate::{request::PromptUserDeviceFlow, Copilot, Status};
 use gpui::{
-    div, svg, AppContext, ClipboardItem, DismissEvent, Element, EventEmitter, FocusHandle,
+    div, AppContext, ClipboardItem, DismissEvent, Element, EventEmitter, FocusHandle,
    FocusableView, InteractiveElement, IntoElement, Model, MouseDownEvent, ParentElement, Render,
    Styled, Subscription, ViewContext,
 };
-use ui::{prelude::*, Button, IconName, Label};
+use ui::{prelude::*, Button, Label, Vector, VectorName};
 use workspace::ModalView;

 const COPILOT_SIGN_UP_URL: &str = "https://github.com/features/copilot";
@ -198,12 +198,8 @@ impl Render for CopilotCodeVerification {
                cx.focus(&this.focus_handle);
            }))
            .child(
-                svg()
-                    .w_32()
-                    .h_16()
-                    .flex_none()
-                    .path(IconName::ZedXCopilot.path())
-                    .text_color(cx.theme().colors().icon),
+                Vector::new(VectorName::ZedXCopilot, rems(8.), rems(4.))
+                    .color(Color::Custom(cx.theme().colors().icon)),
            )
            .child(prompt)
    }
--- a/crates/gpui_macros/src/derive_path_static_str.rs
+++ b/crates/gpui_macros/src/derive_path_static_str.rs
@ -0,0 +1,73 @@
+use proc_macro::TokenStream;
+use quote::quote;
+use syn::{parse_macro_input, Attribute, Data, DeriveInput, Lit, Meta, NestedMeta};
+
+pub fn derive_path_static_str(input: TokenStream) -> TokenStream {
+    let input = parse_macro_input!(input as DeriveInput);
+    let name = &input.ident;
+
+    let prefix = get_attr_value(&input.attrs, "prefix").unwrap_or_else(|| "".to_string());
+    let suffix = get_attr_value(&input.attrs, "suffix").unwrap_or_else(|| "".to_string());
+    let delimiter = get_attr_value(&input.attrs, "delimiter").unwrap_or_else(|| "/".to_string());
+
+    let path_str_impl = impl_path_str(name, &input.data, &prefix, &suffix, &delimiter);
+
+    let expanded = quote! {
+        impl #name {
+            pub fn path_str(&self) -> &'static str {
+                #path_str_impl
+            }
+        }
+    };
+
+    TokenStream::from(expanded)
+}
+
+fn impl_path_str(
+    name: &syn::Ident,
+    data: &Data,
+    prefix: &str,
+    suffix: &str,
+    delimiter: &str,
+) -> proc_macro2::TokenStream {
+    match *data {
+        Data::Enum(ref data) => {
+            let match_arms = data.variants.iter().map(|variant| {
+                let ident = &variant.ident;
+                let path = format!("{}{}{}{}{}", prefix, delimiter, ident, delimiter, suffix);
+                quote! {
+                    #name::#ident => #path,
+                }
+            });
+
+            quote! {
+                match self {
+                    #(#match_arms)*
+                }
+            }
+        }
+        _ => panic!("DerivePathStr only supports enums"),
+    }
+}
+
+fn get_attr_value(attrs: &[Attribute], key: &str) -> Option<String> {
+    attrs
+        .iter()
+        .filter(|attr| attr.path.is_ident("derive_path_static_str"))
+        .find_map(|attr| {
+            if let Ok(Meta::List(meta_list)) = attr.parse_meta() {
+                meta_list.nested.iter().find_map(|nested_meta| {
+                    if let NestedMeta::Meta(Meta::NameValue(name_value)) = nested_meta {
+                        if name_value.path.is_ident(key) {
+                            if let Lit::Str(lit_str) = &name_value.lit {
+                                return Some(lit_str.value());
+                            }
+                        }
+                    }
+                    None
+                })
+            } else {
+                None
+            }
+        })
+}
--- a/crates/gpui_macros/src/gpui_macros.rs
+++ b/crates/gpui_macros/src/gpui_macros.rs
@ -1,4 +1,5 @@
 mod derive_into_element;
+mod derive_path_static_str;
 mod derive_render;
 mod register_action;
 mod styles;
@ -27,6 +28,12 @@ pub fn derive_render(input: TokenStream) -> TokenStream {
    derive_render::derive_render(input)
 }

+#[proc_macro_derive(PathStaticStr)]
+#[doc(hidden)]
+pub fn derive_path_static_str(input: TokenStream) -> TokenStream {
+    derive_path_static_str::derive_path_static_str(input)
+}
+
 /// Used by GPUI to generate the style helpers.
 #[proc_macro]
 #[doc(hidden)]
--- a/crates/storybook/src/assets.rs
+++ b/crates/storybook/src/assets.rs
@ -8,6 +8,7 @@ use rust_embed::RustEmbed;
 #[folder = "../../assets"]
 #[include = "fonts/**/*"]
 #[include = "icons/**/*"]
+#[include = "images/**/*"]
 #[include = "themes/**/*"]
 #[include = "sounds/**/*"]
 #[include = "*.md"]
--- a/crates/storybook/src/story_selector.rs
+++ b/crates/storybook/src/story_selector.rs
@ -40,6 +40,7 @@ pub enum ComponentStory {
    ToolStrip,
    ViewportUnits,
    WithRemSize,
+    Vector,
 }

 impl ComponentStory {
@ -75,6 +76,7 @@ impl ComponentStory {
            Self::ToolStrip => cx.new_view(|_| ui::ToolStripStory).into(),
            Self::ViewportUnits => cx.new_view(|_| crate::stories::ViewportUnitsStory).into(),
            Self::WithRemSize => cx.new_view(|_| crate::stories::WithRemSizeStory).into(),
+            Self::Vector => cx.new_view(|_| ui::VectorStory).into(),
        }
    }
 }
--- a/crates/ui/src/components.rs
+++ b/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::*;
--- a/crates/ui/src/components/icon.rs
+++ b/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",
        }
    }
--- a/crates/ui/src/components/image.rs
+++ b/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");
+    }
+}