docs: svelte icon (#1564)

chakra-ui · Jun 6, 2024 · cf1f29c · cf1f29c
2 parents 8e5edc7 + 7ddb1db
commit cf1f29c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/website/components/icons.tsx b/website/components/icons.tsx
@@ -98,6 +98,17 @@ export function SolidIcon(props: Props) {
   )
 }
 
+export function SvelteIcon(props: Props) {
+  return (
+    <svg width="40px" height="40px" viewBox="0 0 15 15" fill="none" {...props}>
+      <path
+        d="M9.6254 8.35674L4.53711 11.5363M7.50521 9.68159C5.86594 10.7059 3.70666 10.2074 2.68232 8.56814C1.65799 6.92886 2.1565 4.76958 3.79578 3.74525L8.03602 1.09565C9.67529 0.0713228 11.8346 0.569832 12.8589 2.20911C13.7296 3.60248 13.5 5.37156 12.4049 6.5M7.53602 5.29573C9.17529 4.2714 11.3346 4.76991 12.3589 6.40918C13.3832 8.04845 12.8847 10.2077 11.2455 11.2321L7.00521 13.8817C5.36594 14.906 3.20666 14.4075 2.18232 12.7682C1.31746 11.3841 1.53819 9.62936 2.61456 8.5M5.41589 6.62048L10.5042 3.44097"
+        stroke="currentColor"
+      />
+    </svg>
+  )
+}
+
 export function StatechartIcon(props: Props) {
   return (
     <svg width="94" height="94" viewBox="0 0 94 94" fill="none" {...props}>

diff --git a/website/components/mutli-framework.tsx b/website/components/mutli-framework.tsx
@@ -3,7 +3,7 @@ import { chakra } from "@chakra-ui/system"
 import { normalizeProps, useMachine } from "@zag-js/react"
 import * as tabs from "@zag-js/tabs"
 import { CodeArea } from "./code-area"
-import { ReactIcon, SolidIcon, VueIcon } from "./icons"
+import { ReactIcon, SolidIcon, SvelteIcon, VueIcon } from "./icons"
 import { NumberInput } from "./machines/number-input"
 import { Playground } from "./playground"
 
@@ -59,7 +59,7 @@ export function MultiframeworkTabs() {
         </FrameworkButton>
         <FrameworkButton {...api.getTriggerProps({ value: "svelte" })}>
           <VStack>
-            <SolidIcon />
+            <SvelteIcon />
             <Text>Svelte</Text>
           </VStack>
         </FrameworkButton>

diff --git a/website/pages/index.tsx b/website/pages/index.tsx
@@ -24,6 +24,7 @@ import {
   ReactIcon,
   SolidIcon,
   StatechartIcon,
+  SvelteIcon,
   VueIcon,
 } from "components/icons"
 import { Illustration } from "components/illustration"
@@ -114,6 +115,7 @@ export default function Home() {
             <ReactIcon />
             <VueIcon />
             <SolidIcon />
+            <SvelteIcon />
           </HStack>
         </Box>
       </Box>