All files / src/lib/components Icon.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts" module>
	// Hand-ported from design/coastal-v2/project/shared/foundation.jsx (lines 115-139).
	// 24x24 viewBox, currentColor stroke, 1.6 stroke-width, rounded caps/joins.
	// Only icons with current callers ship; add new names here as routes need them.
	export type IconName = 'search' | 'check' | 'check-all' | 'arrow' | 'spark';
</script>
 
<script lang="ts">
	interface Props {
		name: IconName;
		size?: number;
		stroke?: number;
		/** Decorative icons should be aria-hidden; pass a label only when standalone. */
		label?: string;
	}
 
	let { name, size = 22, stroke = 1.6, label }: Props = $props();
</script>
 
<svg
	width={size}
	height={size}
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	stroke-width={stroke}
	stroke-linecap="round"
	stroke-linejoin="round"
	role={label ? 'img' : undefined}
	aria-label={label}
	aria-hidden={label ? undefined : 'true'}
>
	{#if name === 'search'}
		<circle cx="11" cy="11" r="6" />
		<path d="M20 20l-4.5-4.5" />
	{:else if name === 'check'}
		<path d="M5 12.5l4.5 4.5L19 7" />
	{:else if name === 'check-all'}
		<path d="M2 12.5l4 4 7-7" />
		<path d="M11 16.5l1 1 9-9" />
	{:else if name === 'arrow'}
		<path d="M5 12h14" />
		<path d="M13 6l6 6-6 6" />
	{:else if Iname === 'spark'}
		<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" />
	{/if}
</svg>