add custom icons

Author: kantord

README.md

@@ -50,3 +50,16 @@ Run the production build command:
 ```bash
 npm run preview
 ```
+
+## Custom SVG icons
+
+In order to generate custom SVG icons based on the Figma design, download the icon from Figma and place it
+in the `icons/` folder.
+
+Then run:
+
+```bash
+npm run generate-icons
+```
+
+

icons/Continue.svg

@@ -15,7 +15,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "type-check": "tsc --noEmit -p ./tsconfig.app.json"
+    "type-check": "tsc --noEmit -p ./tsconfig.app.json",
+    "generate-icons": "npx @svgr/cli --typescript --no-dimensions --out-dir ./src/components/icons/ -- icons"
   },
   "dependencies": {
     "@hey-api/client-fetch": "^0.6.0",

icons/Copilot.svg

@@ -3,15 +3,8 @@ import { SidebarTrigger } from "./ui/sidebar";
 import { HoverPopover } from "./HoverPopover";
 import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit";
 import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection";
-import {
-  Blocks,
-  BookOpenText,
-  Download,
-  Github,
-  MessageCircleQuestion,
-  ShieldCheck,
-  Youtube,
-} from "lucide-react";
+import { BookOpenText, Download, ShieldCheck } from "lucide-react";
+import { Continue, Copilot, Discord, Github, Youtube } from "./icons";
 
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
@@ -48,10 +41,10 @@ export function Header({ hasError }: { hasError?: boolean }) {
         </HoverPopover>
 
         <HoverPopover title="Help">
-          <MenuItem href="/help/continue-setup" icon={<Blocks />}>
+          <MenuItem href="/help/continue-setup" icon={<Continue />}>
             Set up in <span className="font-bold">Continue</span>
           </MenuItem>
-          <MenuItem icon={<Blocks />} href="/help/copilot-setup">
+          <MenuItem icon={<Copilot />} href="/help/copilot-setup">
             Set up in <span className="font-bold">Copilot</span>
           </MenuItem>
 
@@ -68,7 +61,7 @@ export function Header({ hasError }: { hasError?: boolean }) {
           <MenuItem
             href="https://discord.gg/stacklok"
             target="_blank"
-            icon={<MessageCircleQuestion />}
+            icon={<Discord />}
           >
             Discord
           </MenuItem>

icons/Discord.svg

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgContinue = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 18"
+    {...props}
+  >
+    <path
+      fill="#2E323A"
+      d="m16.114 2.483-1.081 1.815 2.733 4.58c.02.035.032.078.032.116a.24.24 0 0 1-.032.116l-2.733 4.584 1.081 1.815L20 8.994 16.114 2.48zm-1.5 1.58 1.081-1.815h-2.162l-1.081 1.815h2.166zm-2.166.47 2.525 4.23h2.162l-2.521-4.23zm2.166 8.93 2.521-4.233h-2.162l-2.525 4.232zm-2.166.47 1.08 1.808h2.163l-1.081-1.807h-2.166zm-7.33 2.256A.25.25 0 0 1 5 16.158a.23.23 0 0 1-.088-.085l-2.737-4.584H.012L3.898 18h7.768l-1.082-1.811H5.12m5.885-.236 1.082 1.812 1.08-1.816-1.08-1.815-1.082 1.815zm.663-2.05H6.623l-1.081 1.815h5.042zM6.2 13.67 3.674 9.438l-1.08 1.815 2.525 4.233zM.008 11.018H2.17l1.082-1.815H1.093zM4.899 1.93a.23.23 0 0 1 .088-.085c.036-.02.08-.03.12-.03h5.47L11.657 0H3.887L0 6.515h2.162l2.73-4.58zM3.252 8.797 2.17 6.982H.008l1.081 1.815zm1.859-6.28-2.522 4.23L3.67 8.562l2.522-4.229zm5.47-.235H5.53l1.08 1.815h5.052zm1.504 1.58 1.077-1.811L12.085.236l-1.082 1.81z"
+    />
+  </svg>
+);
+export default SvgContinue;

icons/Github.svg

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgCopilot = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#2E323A"
+      d="M18.52 5.871c1.19 1.256 1.69 2.97 1.9 5.373.56 0 1.08.124 1.432.604l.658.89c.189.257.29.563.29.882v2.42c0 .313-.155.618-.408.803-2.976 2.179-6.65 3.932-10.392 3.932-4.14 0-8.285-2.385-10.392-3.932a1.01 1.01 0 0 1-.408-.802v-2.42c0-.32.101-.627.29-.884l.657-.89c.352-.477.875-.603 1.433-.603.21-2.403.709-4.117 1.9-5.373 2.245-2.379 5.218-2.64 6.482-2.646H12c1.242 0 4.253.243 6.52 2.646m-6.518 3.997c-.257 0-.553.015-.867.046-.11.413-.274.786-.513 1.024-.945.945-2.085 1.09-2.695 1.09-.574 0-1.175-.12-1.666-.429-.464.153-.91.373-.94.92-.049 1.037-.053 2.072-.057 3.108q-.003.78-.013 1.56a.79.79 0 0 0 .46.707c2.234 1.018 4.346 1.531 6.29 1.531 1.942 0 4.054-.513 6.287-1.53a.79.79 0 0 0 .46-.708 72 72 0 0 0-.07-4.667h.002c-.029-.551-.477-.768-.942-.92-.491.307-1.091.428-1.665.428-.61 0-1.748-.145-2.694-1.09-.24-.238-.403-.61-.514-1.024a9 9 0 0 0-.864-.046m-2.274 3.707c.485 0 .879.393.879.878v1.619a.878.878 0 0 1-1.757 0v-1.619c0-.485.393-.878.878-.878m4.5 0c.485 0 .879.393.879.878v1.619a.878.878 0 0 1-1.757 0v-1.619c0-.485.393-.878.878-.878m-6.156-7.96c-.945.094-1.742.405-2.147.837-.877.958-.688 3.388-.189 3.901.365.365 1.053.608 1.796.608.567 0 1.647-.122 2.538-1.026.391-.378.634-1.323.607-2.282-.027-.77-.243-1.404-.567-1.674-.35-.31-1.147-.445-2.038-.364m5.818.364c-.324.27-.54.905-.567 1.674-.027.959.216 1.904.608 2.282.89.904 1.97 1.025 2.538 1.025.742 0 1.43-.242 1.795-.607.5-.513.689-2.943-.189-3.901-.405-.432-1.201-.743-2.146-.837-.891-.081-1.688.054-2.039.364M12 7.95c-.216 0-.472.014-.756.04.027.15.04.311.054.487 0 .121 0 .243-.013.378.27-.027.5-.027.715-.027.216 0 .446 0 .716.027-.014-.135-.014-.257-.014-.378.014-.176.027-.338.054-.486A8 8 0 0 0 12 7.95"
+    />
+  </svg>
+);
+export default SvgCopilot;

icons/Youtube.svg

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgDiscord = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#2E323A"
+      d="M18.59 5.89c-1.23-.57-2.54-.99-3.92-1.23-.17.3-.37.71-.5 1.04-1.46-.22-2.91-.22-4.34 0-.14-.33-.34-.74-.51-1.04-1.38.24-2.69.66-3.92 1.23-2.48 3.74-3.15 7.39-2.82 10.98 1.65 1.23 3.24 1.97 4.81 2.46.39-.53.73-1.1 1.03-1.69-.57-.21-1.11-.48-1.62-.79.14-.1.27-.21.4-.31 3.13 1.46 6.52 1.46 9.61 0 .13.11.26.21.4.31-.51.31-1.06.57-1.62.79.3.59.64 1.16 1.03 1.69 1.57-.49 3.17-1.23 4.81-2.46.39-4.17-.67-7.78-2.82-10.98zm-9.75 8.78c-.94 0-1.71-.87-1.71-1.94s.75-1.94 1.71-1.94 1.72.87 1.71 1.94c0 1.06-.75 1.94-1.71 1.94m6.31 0c-.94 0-1.71-.87-1.71-1.94s.75-1.94 1.71-1.94 1.72.87 1.71 1.94c0 1.06-.75 1.94-1.71 1.94"
+    />
+  </svg>
+);
+export default SvgDiscord;

package.json

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgGithub = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#2E323A"
+      fillRule="evenodd"
+      d="M12 3c4.97 0 9 4.13 9 9.228 0 4.076-2.576 7.534-6.15 8.755-.456.09-.618-.197-.618-.443 0-.304.01-1.298.01-2.533 0-.86-.287-1.422-.61-1.708 2.004-.228 4.11-1.009 4.11-4.553 0-1.008-.35-1.83-.927-2.477.094-.233.402-1.171-.088-2.442 0 0-.754-.247-2.472.946A8.5 8.5 0 0 0 12 7.463a8.4 8.4 0 0 0-2.253.31c-1.72-1.193-2.476-.946-2.476-.946-.488 1.27-.18 2.21-.087 2.442-.575.646-.927 1.469-.927 2.477 0 3.535 2.102 4.327 4.1 4.56-.257.231-.49.637-.571 1.234-.513.236-1.816.644-2.619-.766 0 0-.476-.887-1.38-.952 0 0-.877-.011-.06.561 0 0 .589.284.998 1.35 0 0 .528 1.647 3.032 1.09.005.77.013 1.497.013 1.717 0 .244-.166.53-.615.444C5.58 19.764 3 16.304 3 12.228 3 7.13 7.03 3 12 3"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgGithub;

src/components/Header.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgYoutube = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#2E323A"
+      fillRule="evenodd"
+      d="M9.988 14.586V8.974c1.993.938 3.536 1.843 5.36 2.82-1.505.834-3.367 1.77-5.36 2.792m11.103-8.403c-.344-.452-.93-.805-1.553-.922-1.833-.348-13.267-.349-15.099 0q-.752.142-1.328.673C1.5 7.43 2.005 15.452 2.393 16.75c.164.563.375.968.64 1.234.343.353.812.595 1.351.704 1.51.312 9.284.486 15.122.046a2.6 2.6 0 0 0 1.39-.71c1.49-1.49 1.388-9.963.195-11.842"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgYoutube;

src/components/icons/Continue.tsx

@@ -0,0 +1,5 @@
+export { default as Continue } from "./Continue";
+export { default as Copilot } from "./Copilot";
+export { default as Discord } from "./Discord";
+export { default as Github } from "./Github";
+export { default as Youtube } from "./Youtube";