aboutsummaryrefslogtreecommitdiff
path: root/src/components/helpers/Icon.svelte
blob: eb430fb8f8a2d7bacea097b4bac3aa4cad54fa1b (plain)
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
<script>
    export let name;
    export let width = "1rem";
    export let height = "1rem";
    export let focusable = false;
    let icons = [
        {
            box: 24,
            name: "plus-circle",
            path: `<path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
                    />`,
        },
        {
            box: 24,
            name: "minus-circle",
            path: `<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />`,
        },
        {
            name: "info",
            box: 24,
            path: `<path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />`,
        },
    ];
    let displayIcon = icons.find((e) => e.name === name);
</script>

<svg
    class={$$props.class}
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 {displayIcon.box} {displayIcon.box}"
    stroke="currentColor"
    stroke-width={2}
    {width}
    {height}
    {focusable}>{@html displayIcon.path}</svg
>