authorgravatar for 6462596+Spitfire1900@users.noreply.github.comKyle Gottfried <6462596+Spitfire1900@users.noreply.github.com> 2026-04-08 21:50:58-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-04-08 18:50:58-07:00
log72b7f90c5010cc43af87125b3e845a04589b7e5b
tree0007f48a196ed6c79727c858220ee88aa1102396
parent1ec346c22e2a4df96721502c66c16c98b1f4f14d
signature Signed by PGP key B5690EEEBB952194

Add VSCode Insiders and VSCodium icons (#1847)

2 files changed, 125 insertions(+), 2 deletions(-)

apps/web/src/components/Icons.tsx+121
......@@ -128,6 +128,127 @@ export const VisualStudioCode: Icon = (props) => {
128128 );
129129};
130130
131export const VisualStudioCodeInsiders: Icon = (props) => {
132 const id = useId();
133 const maskId = `${id}-vscode-insiders-a`;
134 const topShadowFilterId = `${id}-vscode-insiders-b`;
135 const sideShadowFilterId = `${id}-vscode-insiders-c`;
136 const overlayGradientId = `${id}-vscode-insiders-d`;
137
138 return (
139 <svg {...props} fill="none" viewBox="0 0 100 100">
140 <mask id={maskId} width="100" height="100" x="0" y="0" maskUnits="userSpaceOnUse">
141 <path
142 fill="#fff"
143 fillRule="evenodd"
144 d="M70.912 99.317a6.223 6.223 0 0 0 4.96-.19l20.589-9.907A6.25 6.25 0 0 0 100 83.587V16.413a6.25 6.25 0 0 0-3.54-5.632L75.874.874a6.226 6.226 0 0 0-7.104 1.21L29.355 38.04 12.187 25.01a4.162 4.162 0 0 0-5.318.236l-5.506 5.009a4.168 4.168 0 0 0-.004 6.162L16.247 50 1.36 63.583a4.168 4.168 0 0 0 .004 6.162l5.506 5.01a4.162 4.162 0 0 0 5.318.236l17.168-13.032L68.77 97.917a6.217 6.217 0 0 0 2.143 1.4ZM75.015 27.3 45.11 50l29.906 22.701V27.3Z"
145 clipRule="evenodd"
146 />
147 </mask>
148 <g mask={`url(#${maskId})`}>
149 <path
150 fill="#009a7c"
151 d="M96.461 10.796 75.857.876a6.23 6.23 0 0 0-7.107 1.207l-67.451 61.5a4.167 4.167 0 0 0 .004 6.162l5.51 5.009a4.167 4.167 0 0 0 5.32.236l81.228-61.62c2.725-2.067 6.639-.124 6.639 3.297v-.24a6.25 6.25 0 0 0-3.539-5.63Z"
152 />
153 <g filter={`url(#${topShadowFilterId})`}>
154 <path
155 fill="#00b294"
156 d="m96.461 89.204-20.604 9.92a6.229 6.229 0 0 1-7.107-1.207l-67.451-61.5a4.167 4.167 0 0 1 .004-6.162l5.51-5.009a4.167 4.167 0 0 1 5.32-.236l81.228 61.62c2.725 2.067 6.639.124 6.639-3.297v.24a6.25 6.25 0 0 1-3.539 5.63Z"
157 />
158 </g>
159 <g filter={`url(#${sideShadowFilterId})`}>
160 <path
161 fill="#24bfa5"
162 d="M75.858 99.126a6.232 6.232 0 0 1-7.108-1.21c2.306 2.307 6.25.674 6.25-2.588V4.672c0-3.262-3.944-4.895-6.25-2.589a6.232 6.232 0 0 1 7.108-1.21l20.6 9.908A6.25 6.25 0 0 1 100 16.413v67.174a6.25 6.25 0 0 1-3.541 5.633l-20.601 9.906Z"
163 />
164 </g>
165 <path
166 fill={`url(#${overlayGradientId})`}
167 fillRule="evenodd"
168 d="M70.851 99.317a6.224 6.224 0 0 0 4.96-.19L96.4 89.22a6.25 6.25 0 0 0 3.54-5.633V16.413a6.25 6.25 0 0 0-3.54-5.632L75.812.874a6.226 6.226 0 0 0-7.104 1.21L29.294 38.04 12.126 25.01a4.162 4.162 0 0 0-5.317.236l-5.507 5.009a4.168 4.168 0 0 0-.004 6.162L16.186 50 1.298 63.583a4.168 4.168 0 0 0 .004 6.162l5.507 5.009a4.162 4.162 0 0 0 5.317.236L29.294 61.96l39.414 35.958a6.218 6.218 0 0 0 2.143 1.4ZM74.954 27.3 45.048 50l29.906 22.701V27.3Z"
169 clipRule="evenodd"
170 opacity=".25"
171 style={{ mixBlendMode: "overlay" }}
172 />
173 </g>
174 <defs>
175 <filter
176 id={topShadowFilterId}
177 width="116.727"
178 height="92.246"
179 x="-8.394"
180 y="15.829"
181 colorInterpolationFilters="sRGB"
182 filterUnits="userSpaceOnUse"
183 >
184 <feFlood floodOpacity="0" result="BackgroundImageFix" />
185 <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
186 <feOffset />
187 <feGaussianBlur stdDeviation="4.167" />
188 <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
189 <feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow" />
190 <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
191 </filter>
192 <filter
193 id={sideShadowFilterId}
194 width="47.917"
195 height="116.151"
196 x="60.417"
197 y="-8.076"
198 colorInterpolationFilters="sRGB"
199 filterUnits="userSpaceOnUse"
200 >
201 <feFlood floodOpacity="0" result="BackgroundImageFix" />
202 <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
203 <feOffset />
204 <feGaussianBlur stdDeviation="4.167" />
205 <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
206 <feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow" />
207 <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
208 </filter>
209 <linearGradient
210 id={overlayGradientId}
211 x1="49.939"
212 x2="49.939"
213 y1=".258"
214 y2="99.742"
215 gradientUnits="userSpaceOnUse"
216 >
217 <stop stopColor="#fff" />
218 <stop offset="1" stopColor="#fff" stopOpacity="0" />
219 </linearGradient>
220 </defs>
221 </svg>
222 );
223};
224
225export const VSCodium: Icon = (props) => {
226 const id = useId();
227 const gradientId = `${id}-vscodium-gradient`;
228
229 return (
230 <svg {...props} viewBox="0 0 100 100">
231 <defs>
232 <linearGradient
233 id={gradientId}
234 x1="0"
235 x2="100"
236 y1="0"
237 y2="100"
238 gradientUnits="userSpaceOnUse"
239 >
240 <stop offset="0" stopColor="#62A0EA" />
241 <stop offset="1" stopColor="#1A5FB4" />
242 </linearGradient>
243 </defs>
244 <path
245 fill={`url(#${gradientId})`}
246 d="M48.26 2.274C45.406 4.105 44.583 7.898 46.422 10.742C56.531 26.397 58.917 38.205 57.882 48.553C53.698 68.369 44.603 72.389 36.655 72.389C28.895 72.389 30.973 59.618 36.806 55.88C40.288 53.706 44.748 52.293 48.171 52.293C51.563 52.293 54.313 49.552 54.313 46.17C54.313 42.787 51.563 40.046 48.171 40.046C44.173 40.046 40.251 40.886 36.59 42.316C37.338 38.787 37.614 34.973 36.647 30.919C35.179 24.763 30.953 18.883 23.615 13.183C22.33 12.183 20.7 11.734 19.083 11.934C17.466 12.134 15.995 12.966 14.994 14.248C12.912 16.918 13.394 20.766 16.072 22.843C22.05 27.486 24.024 30.923 24.699 33.752C25.374 36.581 24.831 39.616 23.475 43.786C21.742 49.406 19.73 54.423 18.848 59.234C18.414 61.602 18.377 64.179 18.265 66.238C13.96 62.042 12.275 56.502 12.275 48.407C12.274 45.025 9.524 42.283 6.133 42.284C2.744 42.287-0.002 45.027-0.003 48.407C-0.003 59.463 3.23 69.983 11.895 77.001C19.739 84.474 39.686 81.712 39.686 93.709C39.686 97.095 44.642 98.743 48.033 98.743C51.511 98.743 55.888 96.418 55.888 93.709C55.888 80.097 70.233 71.824 93.848 71.86C97.24 71.865 99.992 69.126 99.997 65.744C100.003 62.361 97.259 59.614 93.867 59.608C92.252 59.606 90.678 59.661 89.126 59.753C91.766 53.544 92.937 46.708 92.695 39.324C92.583 35.943 89.745 33.293 86.356 33.403C82.963 33.513 80.305 36.346 80.416 39.729C80.736 49.397 80.374 58.03 73.171 62.581C71.123 63.874 68.742 64.996 66.484 64.996C68.237 60.228 69.561 55.195 70.103 49.77C70.449 46.308 70.486 42.195 70.091 39C69.478 34.05 68.738 28.436 70.617 24.207C72.305 20.565 76.087 19.04 81.64 19.04C85.029 19.037 87.775 16.296 87.776 12.917C87.778 9.534 85.031 6.79 81.64 6.787C73.388 6.787 67.133 11.13 63.587 16.377C61.733 12.417 59.475 8.336 56.747 4.112C55.866 2.747 54.478 1.788 52.887 1.443C52.099 1.272 51.285 1.257 50.491 1.399C49.697 1.542 48.939 1.839 48.26 2.274z"
247 />
248 </svg>
249 );
250};
251
131252export const Zed: Icon = (props) => {
132253 const id = useId();
133254 const clipPathId = `${id}-zed-logo-a`;
apps/web/src/components/chat/OpenInPicker.tsx+4-2
......@@ -13,6 +13,8 @@ import {
1313 TraeIcon,
1414 IntelliJIdeaIcon,
1515 VisualStudioCode,
16 VisualStudioCodeInsiders,
17 VSCodium,
1618 Zed,
1719} from "../Icons";
1820import { isMacPlatform, isWindowsPlatform } from "~/lib/utils";
......@@ -37,12 +39,12 @@ const resolveOptions = (platform: string, availableEditors: ReadonlyArray<Editor
3739 },
3840 {
3941 label: "VS Code Insiders",
40 Icon: VisualStudioCode,
42 Icon: VisualStudioCodeInsiders,
4143 value: "vscode-insiders",
4244 },
4345 {
4446 label: "VSCodium",
45 Icon: VisualStudioCode,
47 Icon: VSCodium,
4648 value: "vscodium",
4749 },
4850 {