feat: add more icons

src/lib/icons/calibrate.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path
+		d="M28.83,21.17,25,17.37l.67-.67a1,1,0,0,0,0-1.41l-6-6a1,1,0,0,0-1.41,0h0l-.79.79L10.71,3.29a1,1,0,0,0-1.41,0h0l-4,4-.12.15-4,6a1,1,0,0,0,.12,1.26l3,3a1,1,0,0,0,1.42,0L10,13.41l2.09,2.09-4.8,4.79a1,1,0,0,0,0,1.41l2,2A1,1,0,0,0,10,24a1,1,0,0,0,.52-.15l4.33-2.6,2.44,2.45a1,1,0,0,0,1.41,0h0l.67-.7,3.79,3.83a4,4,0,0,0,5.66-5.66ZM10,10.58l-5,5L3.29,13.87,6.78,8.63,10,5.41l6.09,6.09L13.5,14.08Zm8,11-2.84-2.84-5,3L9.42,21,19,11.41,23.59,16Zm9.42,3.83a2,2,0,0,1-2.83,0h0l-3.8-3.79,2.83-2.83,3.8,3.79a2,2,0,0,1,0,2.83Z"
+	/>
+</svg>

src/lib/icons/information.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path
+		d="M17 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"
+	/><path
+		d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
+	/>
+</svg>

src/lib/icons/logo-discord.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path
+		d="M25.7,7.1C23.9,6.3,22,5.7,20,5.3c0,0-0.1,0-0.1,0c-0.2,0.4-0.5,1-0.7,1.5c-2.2-0.3-4.3-0.3-6.4,0c-0.2-0.5-0.5-1-0.7-1.5 c0,0-0.1,0-0.1,0c-2,0.3-3.9,0.9-5.7,1.8c0,0,0,0,0,0c-3.6,5.4-4.6,10.7-4.1,15.9c0,0,0,0.1,0,0.1c2.4,1.8,4.7,2.8,7,3.5 c0,0,0.1,0,0.1,0c0.5-0.7,1-1.5,1.4-2.3c0,0,0-0.1,0-0.1c-0.8-0.3-1.5-0.6-2.2-1c-0.1,0-0.1-0.1,0-0.1c0.1-0.1,0.3-0.2,0.4-0.3 c0,0,0.1,0,0.1,0c4.6,2.1,9.5,2.1,14.1,0c0,0,0.1,0,0.1,0c0.1,0.1,0.3,0.2,0.4,0.3c0.1,0,0,0.1,0,0.1c-0.7,0.4-1.4,0.8-2.2,1 c0,0-0.1,0.1,0,0.1c0.4,0.8,0.9,1.6,1.4,2.3c0,0,0.1,0,0.1,0c2.3-0.7,4.6-1.8,7-3.5c0,0,0,0,0-0.1C30.5,17,28.9,11.8,25.7,7.1 C25.7,7.1,25.7,7.1,25.7,7.1z M11.4,19.9c-1.4,0-2.5-1.3-2.5-2.8s1.1-2.8,2.5-2.8c1.4,0,2.5,1.3,2.5,2.8 C13.9,18.6,12.8,19.9,11.4,19.9z M20.7,19.9c-1.4,0-2.5-1.3-2.5-2.8s1.1-2.8,2.5-2.8c1.4,0,2.5,1.3,2.5,2.8 C23.2,18.6,22.1,19.9,20.7,19.9z"
+	/>
+</svg>

src/lib/icons/logo-github.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path
+		fill-rule="evenodd"
+		d="M16,2a14,14,0,0,0-4.43,27.28c.7.13,1-.3,1-.67s0-1.21,0-2.38c-3.89.84-4.71-1.88-4.71-1.88A3.71,3.71,0,0,0,6.24,22.3c-1.27-.86.1-.85.1-.85A2.94,2.94,0,0,1,8.48,22.9a3,3,0,0,0,4.08,1.16,2.93,2.93,0,0,1,.88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4,5.4,0,0,1,1.44-3.76,5,5,0,0,1,.14-3.7s1.17-.38,3.85,1.43a13.3,13.3,0,0,1,7,0c2.67-1.81,3.84-1.43,3.84-1.43a5,5,0,0,1,.14,3.7,5.4,5.4,0,0,1,1.44,3.76c0,5.38-3.27,6.56-6.39,6.91a3.33,3.33,0,0,1,.95,2.59c0,1.87,0,3.38,0,3.84s.25.81,1,.67A14,14,0,0,0,16,2Z"
+	/>
+</svg>

src/lib/icons/menu.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path d="M4 6H28V8H4zM4 24H28V26H4zM4 12H28V14H4zM4 18H28V20H4z" />
+</svg>

src/lib/icons/side-panel-close.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path
+		d="M28,4H4C2.9,4,2,4.9,2,6v20c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2V6C30,4.9,29.1,4,28,4z M10,26H4V6h6V26z M28,15H17.8 l3.6-3.6L20,10l-6,6l6,6l1.4-1.4L17.8,17H28v9H12V6h16V15z"
+	/>
+</svg>

src/lib/icons/subtract.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path d="M8 15H24V17H8z" />
+</svg>

src/lib/icons/zoom-in.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { IconProps } from '$lib/types'
+
+	type $$Props = IconProps
+
+	export let size: $$Props['size'] = 20
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width={size} height={size}>
+	<path d="M18 12L14 12 14 8 12 8 12 12 8 12 8 14 12 14 12 18 14 18 14 14 18 14 18 12z" />
+	<path
+		d="M21.4479,20A10.856,10.856,0,0,0,24,13,11,11,0,1,0,13,24a10.856,10.856,0,0,0,7-2.5521L27.5859,29,29,27.5859ZM13,22a9,9,0,1,1,9-9A9.01,9.01,0,0,1,13,22Z"
+	/>
+</svg>

src/lib/index.ts

@@ -13,6 +13,7 @@ export { default as Dropdown } from './components/inputs/dropdown.svelte'
 export { default as DropdownItem } from './components/inputs/dropdown-item.svelte'
 
 export { default as Theme } from './theme.svelte'
+export type { ThemeStore } from './stores/theme'
 export type { DarkModeOption } from './types'
 
 // Icons

src/routes/+page.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
-	import { Badge, Button, Theme, Typography, Container, type DarkModeOption } from '$lib'
-	import Dropdown from '$lib/components/inputs/dropdown.svelte'
-	import DropdownItem from '$lib/components/inputs/dropdown-item.svelte'
-	import InputText from '$lib/components/inputs/input-text.svelte'
-	import Asleep from '$lib/icons/asleep.svelte'
-	import CaretDown from '$lib/icons/caret-down.svelte'
-	import CheckmarkFilled from '$lib/icons/checkmark-filled.svelte'
-	import Checkmark from '$lib/icons/checkmark.svelte'
-	import ChevronRight from '$lib/icons/chevron-right.svelte'
-	import Close from '$lib/icons/close.svelte'
-	import Light from '$lib/icons/light.svelte'
-	import type { ThemeStore } from '$lib/stores/theme'
+	import {
+		Badge,
+		Button,
+		Theme,
+		Typography,
+		Container,
+		InputText,
+		Dropdown,
+		DropdownItem,
+		type DarkModeOption,
+		type ThemeStore,
+	} from '$lib'
+	import {
+		Asleep,
+		CaretDown,
+		CheckmarkFilled,
+		Checkmark,
+		ChevronRight,
+		Close,
+		Light,
+	} from '$lib/icons'
 	import InputPalette from './components/input-palette.svelte'
 
 	let darkMode: DarkModeOption = 'light'