blob: c9154f3753a2c57937def439f2c7561cf51d0801 (
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
45
46
47
48
49
50
|
<script lang="ts">
export let name;
export let width = "1rem";
export let height = "1rem";
export let focusable = "false";
export let handleClick = () => {
console.log("Default icon on:click function prints this");
};
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
on:click={handleClick}
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
>
|
