chromia 0.0.14 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,79 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 24 25"
29
+ fill="none"
30
+ >
31
+ <g id="id_DownloadCloud">
32
+ <path
33
+ id="icon_DownloadCloud"
34
+ d="M16.3714 16.3194H19.4449C21.3925 16.3194 22.9714 14.9911 22.9714 13.0434C22.9714 11.0958 21.3925 9.51691 19.4449 9.51691C19.3125 9.51691 19.1817 9.52422 19.0531 9.53844V9.51691H19.0046C19.0366 9.26019 19.0531 8.99864 19.0531 8.73324C19.0531 5.27075 16.2462 2.46385 12.7837 2.46385C10.439 2.46385 8.3949 3.75099 7.3195 5.65723C7.05669 5.61857 6.78783 5.59855 6.51429 5.59855C3.48461 5.59855 1.02857 8.05459 1.02857 11.0843C1.02857 13.8479 3.07216 15.8836 5.73061 16.2639H8.57143M12.3918 9.90875V21.9725M12.3918 21.9725L15.1714 19.2639M12.3918 21.9725L9.68572 19.2639"
35
+ stroke="url(#grad-DownloadCloud)"
36
+ stroke-width={weight}
37
+ stroke-linecap="round"
38
+ stroke-linejoin="round"
39
+ />
40
+ </g>
41
+
42
+ <defs>
43
+ <linearGradient
44
+ id="grad-DownloadCloud"
45
+ x1={getGradientDirection(gradient.direction).x1}
46
+ y1={getGradientDirection(gradient.direction).y1}
47
+ x2={getGradientDirection(gradient.direction).x2}
48
+ y2={getGradientDirection(gradient.direction).y2}
49
+ >
50
+ <stop
51
+ offset="0%"
52
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
53
+ />
54
+ <stop
55
+ offset="100%"
56
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
57
+ />
58
+ </linearGradient>
59
+ </defs>
60
+ </svg>
61
+ {:else}
62
+ <svg
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ style="width: {size}; height: {size};"
65
+ viewBox="0 0 24 25"
66
+ fill="none"
67
+ >
68
+ <g id="id_DownloadCloud">
69
+ <path
70
+ id="icon_DownloadCloud"
71
+ d="M16.3714 16.3194H19.4449C21.3925 16.3194 22.9714 14.9911 22.9714 13.0434C22.9714 11.0958 21.3925 9.51691 19.4449 9.51691C19.3125 9.51691 19.1817 9.52422 19.0531 9.53844V9.51691H19.0046C19.0366 9.26019 19.0531 8.99864 19.0531 8.73324C19.0531 5.27075 16.2462 2.46385 12.7837 2.46385C10.439 2.46385 8.3949 3.75099 7.3195 5.65723C7.05669 5.61857 6.78783 5.59855 6.51429 5.59855C3.48461 5.59855 1.02857 8.05459 1.02857 11.0843C1.02857 13.8479 3.07216 15.8836 5.73061 16.2639H8.57143M12.3918 9.90875V21.9725M12.3918 21.9725L15.1714 19.2639M12.3918 21.9725L9.68572 19.2639"
72
+ stroke={color}
73
+ stroke-width={weight}
74
+ stroke-linecap="round"
75
+ stroke-linejoin="round"
76
+ />
77
+ </g>
78
+ </svg>
79
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type DownloadCloudIconProps = typeof __propDef.props;
18
+ export type DownloadCloudIconEvents = typeof __propDef.events;
19
+ export type DownloadCloudIconSlots = typeof __propDef.slots;
20
+ export default class DownloadCloudIcon extends SvelteComponent<DownloadCloudIconProps, DownloadCloudIconEvents, DownloadCloudIconSlots> {
21
+ }
22
+ export {};
@@ -0,0 +1,79 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 16 17"
29
+ fill="none"
30
+ >
31
+ <g id="id_Play">
32
+ <path
33
+ id="icon_Play"
34
+ d="M12.096 7.46253C13.033 8.00404 13.0364 8.68523 12.096 9.29744L4.82946 14.3797C3.91643 14.8849 3.29633 14.5866 3.23123 13.4932L3.2004 2.8563C3.17984 1.84917 3.97981 1.56462 4.74209 2.04749L12.096 7.46253Z"
35
+ stroke="url(#grad-Play)"
36
+ stroke-width={weight}
37
+ stroke-linecap="round"
38
+ stroke-linejoin="round"
39
+ />
40
+ </g>
41
+
42
+ <defs>
43
+ <linearGradient
44
+ id="grad-Play"
45
+ x1={getGradientDirection(gradient.direction).x1}
46
+ y1={getGradientDirection(gradient.direction).y1}
47
+ x2={getGradientDirection(gradient.direction).x2}
48
+ y2={getGradientDirection(gradient.direction).y2}
49
+ >
50
+ <stop
51
+ offset="0%"
52
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
53
+ />
54
+ <stop
55
+ offset="100%"
56
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
57
+ />
58
+ </linearGradient>
59
+ </defs>
60
+ </svg>
61
+ {:else}
62
+ <svg
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ style="width: {size}; height: {size};"
65
+ viewBox="0 0 16 17"
66
+ fill="none"
67
+ >
68
+ <g id="id_Play">
69
+ <path
70
+ id="icon_Play"
71
+ d="M12.096 7.46253C13.033 8.00404 13.0364 8.68523 12.096 9.29744L4.82946 14.3797C3.91643 14.8849 3.29633 14.5866 3.23123 13.4932L3.2004 2.8563C3.17984 1.84917 3.97981 1.56462 4.74209 2.04749L12.096 7.46253Z"
72
+ stroke={color}
73
+ stroke-width={weight}
74
+ stroke-linecap="round"
75
+ stroke-linejoin="round"
76
+ />
77
+ </g>
78
+ </svg>
79
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type PlayIconProps = typeof __propDef.props;
18
+ export type PlayIconEvents = typeof __propDef.events;
19
+ export type PlayIconSlots = typeof __propDef.slots;
20
+ export default class PlayIcon extends SvelteComponent<PlayIconProps, PlayIconEvents, PlayIconSlots> {
21
+ }
22
+ export {};
@@ -0,0 +1,79 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 16 17"
29
+ fill="none"
30
+ >
31
+ <g id="id_Reload">
32
+ <path
33
+ id="icon_Reload"
34
+ d="M13.5377 5.0182C12.4257 3.10523 10.3474 1.8182 7.96702 1.8182C5.26809 1.8182 2.95748 3.47273 2.00345 5.8182M11.5845 5.8182H14.8V2.6182M2.46228 11.4182C3.57424 13.3312 5.65257 14.6182 8.03296 14.6182C10.7319 14.6182 13.0425 12.9637 13.9965 10.6182M4.4155 10.6182H1.19999V13.8182"
35
+ stroke="url(#grad-Reload)"
36
+ stroke-width={weight}
37
+ stroke-linecap="round"
38
+ stroke-linejoin="round"
39
+ />
40
+ </g>
41
+
42
+ <defs>
43
+ <linearGradient
44
+ id="grad-Reload"
45
+ x1={getGradientDirection(gradient.direction).x1}
46
+ y1={getGradientDirection(gradient.direction).y1}
47
+ x2={getGradientDirection(gradient.direction).x2}
48
+ y2={getGradientDirection(gradient.direction).y2}
49
+ >
50
+ <stop
51
+ offset="0%"
52
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
53
+ />
54
+ <stop
55
+ offset="100%"
56
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
57
+ />
58
+ </linearGradient>
59
+ </defs>
60
+ </svg>
61
+ {:else}
62
+ <svg
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ style="width: {size}; height: {size};"
65
+ viewBox="0 0 16 17"
66
+ fill="none"
67
+ >
68
+ <g id="id_Reload">
69
+ <path
70
+ id="icon_Reload"
71
+ d="M13.5377 5.0182C12.4257 3.10523 10.3474 1.8182 7.96702 1.8182C5.26809 1.8182 2.95748 3.47273 2.00345 5.8182M11.5845 5.8182H14.8V2.6182M2.46228 11.4182C3.57424 13.3312 5.65257 14.6182 8.03296 14.6182C10.7319 14.6182 13.0425 12.9637 13.9965 10.6182M4.4155 10.6182H1.19999V13.8182"
72
+ stroke={color}
73
+ stroke-width={weight}
74
+ stroke-linecap="round"
75
+ stroke-linejoin="round"
76
+ />
77
+ </g>
78
+ </svg>
79
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type ReloadIconProps = typeof __propDef.props;
18
+ export type ReloadIconEvents = typeof __propDef.events;
19
+ export type ReloadIconSlots = typeof __propDef.slots;
20
+ export default class ReloadIcon extends SvelteComponent<ReloadIconProps, ReloadIconEvents, ReloadIconSlots> {
21
+ }
22
+ export {};
@@ -0,0 +1,79 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 20 21"
29
+ fill="none"
30
+ >
31
+ <g id="id_Texture">
32
+ <path
33
+ id="icon_Texture"
34
+ d="M5 18.7182L13.5 10.7182L17.5 14.7182M5 18.7182H15C16.6569 18.7182 18 17.3751 18 15.7182V10.2182M5 18.7182C3.34315 18.7182 2 17.3751 2 15.7182V5.7182C2 4.06135 3.34315 2.7182 5 2.7182H10.5M14 3.67476C14 2.59418 14.8954 1.7182 16 1.7182C17.1046 1.7182 18 2.59418 18 3.67476C18 4.75534 17.1046 5.63133 16 5.63133M16 8.2934V8.2182M8 7.2182C8 8.04663 7.32843 8.7182 6.5 8.7182C5.67157 8.7182 5 8.04663 5 7.2182C5 6.38977 5.67157 5.7182 6.5 5.7182C7.32843 5.7182 8 6.38977 8 7.2182Z"
35
+ stroke="url(#grad-Texture)"
36
+ stroke-width={weight}
37
+ stroke-linecap="round"
38
+ stroke-linejoin="round"
39
+ />
40
+ </g>
41
+
42
+ <defs>
43
+ <linearGradient
44
+ id="grad-Texture"
45
+ x1={getGradientDirection(gradient.direction).x1}
46
+ y1={getGradientDirection(gradient.direction).y1}
47
+ x2={getGradientDirection(gradient.direction).x2}
48
+ y2={getGradientDirection(gradient.direction).y2}
49
+ >
50
+ <stop
51
+ offset="0%"
52
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
53
+ />
54
+ <stop
55
+ offset="100%"
56
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
57
+ />
58
+ </linearGradient>
59
+ </defs>
60
+ </svg>
61
+ {:else}
62
+ <svg
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ style="width: {size}; height: {size};"
65
+ viewBox="0 0 20 21"
66
+ fill="none"
67
+ >
68
+ <g id="id_Texture">
69
+ <path
70
+ id="icon_Texture"
71
+ d="M5 18.7182L13.5 10.7182L17.5 14.7182M5 18.7182H15C16.6569 18.7182 18 17.3751 18 15.7182V10.2182M5 18.7182C3.34315 18.7182 2 17.3751 2 15.7182V5.7182C2 4.06135 3.34315 2.7182 5 2.7182H10.5M14 3.67476C14 2.59418 14.8954 1.7182 16 1.7182C17.1046 1.7182 18 2.59418 18 3.67476C18 4.75534 17.1046 5.63133 16 5.63133M16 8.2934V8.2182M8 7.2182C8 8.04663 7.32843 8.7182 6.5 8.7182C5.67157 8.7182 5 8.04663 5 7.2182C5 6.38977 5.67157 5.7182 6.5 5.7182C7.32843 5.7182 8 6.38977 8 7.2182Z"
72
+ stroke={color}
73
+ stroke-width={weight}
74
+ stroke-linecap="round"
75
+ stroke-linejoin="round"
76
+ />
77
+ </g>
78
+ </svg>
79
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type TextureIconProps = typeof __propDef.props;
18
+ export type TextureIconEvents = typeof __propDef.events;
19
+ export type TextureIconSlots = typeof __propDef.slots;
20
+ export default class TextureIcon extends SvelteComponent<TextureIconProps, TextureIconEvents, TextureIconSlots> {
21
+ }
22
+ export {};
@@ -0,0 +1,75 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 20 21"
29
+ fill="none"
30
+ >
31
+ <g id="id_ViewMode">
32
+ <path
33
+ id="icon_ViewMode"
34
+ d="M8.25 8.2182C8.25 7.80399 7.91421 7.4682 7.5 7.4682C7.08579 7.4682 6.75 7.80399 6.75 8.2182H8.25ZM6.75 18.2182C6.75 18.6324 7.08579 18.9682 7.5 18.9682C7.91421 18.9682 8.25 18.6324 8.25 18.2182H6.75ZM5 2.9682H15V1.4682H5V2.9682ZM17.25 5.2182V15.2182H18.75V5.2182H17.25ZM15 17.4682H5V18.9682H15V17.4682ZM2.75 15.2182V5.2182H1.25V15.2182H2.75ZM5 17.4682C3.75736 17.4682 2.75 16.4608 2.75 15.2182H1.25C1.25 17.2893 2.92893 18.9682 5 18.9682V17.4682ZM17.25 15.2182C17.25 16.4608 16.2426 17.4682 15 17.4682V18.9682C17.0711 18.9682 18.75 17.2893 18.75 15.2182H17.25ZM15 2.9682C16.2426 2.9682 17.25 3.97556 17.25 5.2182H18.75C18.75 3.14713 17.0711 1.4682 15 1.4682V2.9682ZM5 1.4682C2.92893 1.4682 1.25 3.14713 1.25 5.2182H2.75C2.75 3.97556 3.75736 2.9682 5 2.9682V1.4682ZM6.75 8.2182V18.2182H8.25V8.2182H6.75ZM2.5 8.4682H17.5V6.9682H2.5V8.4682Z"
35
+ fill="url(#grad-ViewMode)"
36
+ stroke-width={weight}
37
+ />
38
+ </g>
39
+
40
+ <defs>
41
+ <linearGradient
42
+ id="grad-ViewMode"
43
+ x1={getGradientDirection(gradient.direction).x1}
44
+ y1={getGradientDirection(gradient.direction).y1}
45
+ x2={getGradientDirection(gradient.direction).x2}
46
+ y2={getGradientDirection(gradient.direction).y2}
47
+ >
48
+ <stop
49
+ offset="0%"
50
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
51
+ />
52
+ <stop
53
+ offset="100%"
54
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
55
+ />
56
+ </linearGradient>
57
+ </defs>
58
+ </svg>
59
+ {:else}
60
+ <svg
61
+ xmlns="http://www.w3.org/2000/svg"
62
+ style="width: {size}; height: {size};"
63
+ viewBox="0 0 20 21"
64
+ fill="none"
65
+ >
66
+ <g id="id_ViewMode">
67
+ <path
68
+ id="icon_ViewMode"
69
+ d="M8.25 8.2182C8.25 7.80399 7.91421 7.4682 7.5 7.4682C7.08579 7.4682 6.75 7.80399 6.75 8.2182H8.25ZM6.75 18.2182C6.75 18.6324 7.08579 18.9682 7.5 18.9682C7.91421 18.9682 8.25 18.6324 8.25 18.2182H6.75ZM5 2.9682H15V1.4682H5V2.9682ZM17.25 5.2182V15.2182H18.75V5.2182H17.25ZM15 17.4682H5V18.9682H15V17.4682ZM2.75 15.2182V5.2182H1.25V15.2182H2.75ZM5 17.4682C3.75736 17.4682 2.75 16.4608 2.75 15.2182H1.25C1.25 17.2893 2.92893 18.9682 5 18.9682V17.4682ZM17.25 15.2182C17.25 16.4608 16.2426 17.4682 15 17.4682V18.9682C17.0711 18.9682 18.75 17.2893 18.75 15.2182H17.25ZM15 2.9682C16.2426 2.9682 17.25 3.97556 17.25 5.2182H18.75C18.75 3.14713 17.0711 1.4682 15 1.4682V2.9682ZM5 1.4682C2.92893 1.4682 1.25 3.14713 1.25 5.2182H2.75C2.75 3.97556 3.75736 2.9682 5 2.9682V1.4682ZM6.75 8.2182V18.2182H8.25V8.2182H6.75ZM2.5 8.4682H17.5V6.9682H2.5V8.4682Z"
70
+ fill={color}
71
+ stroke-width={weight}
72
+ />
73
+ </g>
74
+ </svg>
75
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type ViewModeIconProps = typeof __propDef.props;
18
+ export type ViewModeIconEvents = typeof __propDef.events;
19
+ export type ViewModeIconSlots = typeof __propDef.slots;
20
+ export default class ViewModeIcon extends SvelteComponent<ViewModeIconProps, ViewModeIconEvents, ViewModeIconSlots> {
21
+ }
22
+ export {};
@@ -0,0 +1,75 @@
1
+ <script>export let color = "#000";
2
+ export let gradient = {
3
+ colors: ["", ""],
4
+ direction: "bottom"
5
+ };
6
+ export let size = "1rem";
7
+ export let weight = 1;
8
+ const getGradientDirection = (direction) => {
9
+ switch (direction) {
10
+ case "top":
11
+ return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
12
+ case "right":
13
+ return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
14
+ case "bottom":
15
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
16
+ case "left":
17
+ return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
18
+ default:
19
+ return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
20
+ }
21
+ };
22
+ </script>
23
+
24
+ {#if gradient.colors[1] !== ""}
25
+ <svg
26
+ xmlns="http://www.w3.org/2000/svg"
27
+ style="width: {size}; height: {size};"
28
+ viewBox="0 0 20 21"
29
+ fill="none"
30
+ >
31
+ <g id="id_Zoom">
32
+ <path
33
+ id="icon_Zoom"
34
+ d="M14.6272 13.8792C14.3295 13.5912 13.8547 13.599 13.5667 13.8967C13.2787 14.1944 13.2865 14.6692 13.5842 14.9572L14.6272 13.8792ZM16.4785 17.7572C16.7762 18.0452 17.251 18.0374 17.539 17.7397C17.827 17.442 17.8192 16.9672 17.5215 16.6792L16.4785 17.7572ZM8.75 12.2182C8.75 12.6324 9.08579 12.9682 9.5 12.9682C9.91421 12.9682 10.25 12.6324 10.25 12.2182H8.75ZM10.25 7.2182C10.25 6.80399 9.91421 6.4682 9.5 6.4682C9.08579 6.4682 8.75 6.80399 8.75 7.2182H10.25ZM7 8.9682C6.58579 8.9682 6.25 9.30399 6.25 9.7182C6.25 10.1324 6.58579 10.4682 7 10.4682V8.9682ZM12 10.4682C12.4142 10.4682 12.75 10.1324 12.75 9.7182C12.75 9.30399 12.4142 8.9682 12 8.9682V10.4682ZM15.3167 9.75153C15.3167 12.9456 12.7274 15.5349 9.53333 15.5349V17.0349C13.5558 17.0349 16.8167 13.774 16.8167 9.75153H15.3167ZM9.53333 15.5349C6.33929 15.5349 3.75 12.9456 3.75 9.75153H2.25C2.25 13.774 5.51086 17.0349 9.53333 17.0349V15.5349ZM3.75 9.75153C3.75 6.55749 6.33929 3.9682 9.53333 3.9682V2.4682C5.51086 2.4682 2.25 5.72906 2.25 9.75153H3.75ZM9.53333 3.9682C12.7274 3.9682 15.3167 6.55749 15.3167 9.75153H16.8167C16.8167 5.72906 13.5558 2.4682 9.53333 2.4682V3.9682ZM13.5842 14.9572L16.4785 17.7572L17.5215 16.6792L14.6272 13.8792L13.5842 14.9572ZM10.25 12.2182V9.7182H8.75V12.2182H10.25ZM10.25 9.7182V7.2182H8.75V9.7182H10.25ZM7 10.4682H9.5V8.9682H7V10.4682ZM9.5 10.4682H12V8.9682H9.5V10.4682Z"
35
+ fill="url(#grad-Zoom)"
36
+ stroke-width={weight}
37
+ />
38
+ </g>
39
+
40
+ <defs>
41
+ <linearGradient
42
+ id="grad-Zoom"
43
+ x1={getGradientDirection(gradient.direction).x1}
44
+ y1={getGradientDirection(gradient.direction).y1}
45
+ x2={getGradientDirection(gradient.direction).x2}
46
+ y2={getGradientDirection(gradient.direction).y2}
47
+ >
48
+ <stop
49
+ offset="0%"
50
+ style="stop-color:{gradient.colors[0]};stop-opacity:1"
51
+ />
52
+ <stop
53
+ offset="100%"
54
+ style="stop-color:{gradient.colors[1]};stop-opacity:1"
55
+ />
56
+ </linearGradient>
57
+ </defs>
58
+ </svg>
59
+ {:else}
60
+ <svg
61
+ xmlns="http://www.w3.org/2000/svg"
62
+ style="width: {size}; height: {size};"
63
+ viewBox="0 0 20 21"
64
+ fill="none"
65
+ >
66
+ <g id="id_Zoom">
67
+ <path
68
+ id="icon_Zoom"
69
+ d="M14.6272 13.8792C14.3295 13.5912 13.8547 13.599 13.5667 13.8967C13.2787 14.1944 13.2865 14.6692 13.5842 14.9572L14.6272 13.8792ZM16.4785 17.7572C16.7762 18.0452 17.251 18.0374 17.539 17.7397C17.827 17.442 17.8192 16.9672 17.5215 16.6792L16.4785 17.7572ZM8.75 12.2182C8.75 12.6324 9.08579 12.9682 9.5 12.9682C9.91421 12.9682 10.25 12.6324 10.25 12.2182H8.75ZM10.25 7.2182C10.25 6.80399 9.91421 6.4682 9.5 6.4682C9.08579 6.4682 8.75 6.80399 8.75 7.2182H10.25ZM7 8.9682C6.58579 8.9682 6.25 9.30399 6.25 9.7182C6.25 10.1324 6.58579 10.4682 7 10.4682V8.9682ZM12 10.4682C12.4142 10.4682 12.75 10.1324 12.75 9.7182C12.75 9.30399 12.4142 8.9682 12 8.9682V10.4682ZM15.3167 9.75153C15.3167 12.9456 12.7274 15.5349 9.53333 15.5349V17.0349C13.5558 17.0349 16.8167 13.774 16.8167 9.75153H15.3167ZM9.53333 15.5349C6.33929 15.5349 3.75 12.9456 3.75 9.75153H2.25C2.25 13.774 5.51086 17.0349 9.53333 17.0349V15.5349ZM3.75 9.75153C3.75 6.55749 6.33929 3.9682 9.53333 3.9682V2.4682C5.51086 2.4682 2.25 5.72906 2.25 9.75153H3.75ZM9.53333 3.9682C12.7274 3.9682 15.3167 6.55749 15.3167 9.75153H16.8167C16.8167 5.72906 13.5558 2.4682 9.53333 2.4682V3.9682ZM13.5842 14.9572L16.4785 17.7572L17.5215 16.6792L14.6272 13.8792L13.5842 14.9572ZM10.25 12.2182V9.7182H8.75V12.2182H10.25ZM10.25 9.7182V7.2182H8.75V9.7182H10.25ZM7 10.4682H9.5V8.9682H7V10.4682ZM9.5 10.4682H12V8.9682H9.5V10.4682Z"
70
+ fill={color}
71
+ stroke-width={weight}
72
+ />
73
+ </g>
74
+ </svg>
75
+ {/if}
@@ -0,0 +1,22 @@
1
+ import { SvelteComponent } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ color?: string | undefined;
5
+ gradient?: {
6
+ colors: [string, string];
7
+ direction: "top" | "right" | "bottom" | "left";
8
+ } | undefined;
9
+ size?: string | undefined;
10
+ weight?: number | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export type ZoomIconProps = typeof __propDef.props;
18
+ export type ZoomIconEvents = typeof __propDef.events;
19
+ export type ZoomIconSlots = typeof __propDef.slots;
20
+ export default class ZoomIcon extends SvelteComponent<ZoomIconProps, ZoomIconEvents, ZoomIconSlots> {
21
+ }
22
+ export {};
package/dist/index.d.ts CHANGED
@@ -55,6 +55,12 @@ import LightIcon from "./icons/LightIcon.svelte";
55
55
  import BrandIcon from "./icons/BrandIcon.svelte";
56
56
  import CategoryIcon from "./icons/CategoryIcon.svelte";
57
57
  import SettingsIcon from "./icons/SettingsIcon.svelte";
58
+ import DownloadCloudIcon from "./icons/DownloadCloudIcon.svelte";
59
+ import PlayIcon from "./icons/PlayIcon.svelte";
60
+ import ReloadIcon from "./icons/ReloadIcon.svelte";
61
+ import TextureIcon from "./icons/TextureIcon.svelte";
62
+ import ViewModeIcon from "./icons/ViewModeIcon.svelte";
63
+ import ZoomIcon from "./icons/ZoomIcon.svelte";
58
64
  import type IconProps from "./types/IconProps.ts";
59
- export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, MaterialIcon, TrendUpIcon, ChartTrendUp, BellIcon, BezierIcon, CalendarIcon, CameraIcon, CertificateIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, CopyIcon, EditIcon, FavoriteIcon, FilterIcon, FlameIcon, FolderIcon, FolderPlusIcon, GridIcon, HourglassIcon, LockIcon, LogoutIcon, MenuIcon, NoFolder, NotificationIcon, OverlapIcon, SearchIcon, SendIcon, TeamUserIcon, TrashIcon, UploadIcon, UserProfileIcon, EyeClosedIcon, EyeOpenIcon, Icon, HomeIcon, FlipLeftIcon, ColumnHorizontal, ReportIcon, UpgradeIcon, DarkIcon, LightIcon, BrandIcon, CategoryIcon, SettingsIcon };
65
+ export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, MaterialIcon, TrendUpIcon, ChartTrendUp, BellIcon, BezierIcon, CalendarIcon, CameraIcon, CertificateIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, CopyIcon, EditIcon, FavoriteIcon, FilterIcon, FlameIcon, FolderIcon, FolderPlusIcon, GridIcon, HourglassIcon, LockIcon, LogoutIcon, MenuIcon, NoFolder, NotificationIcon, OverlapIcon, SearchIcon, SendIcon, TeamUserIcon, TrashIcon, UploadIcon, UserProfileIcon, EyeClosedIcon, EyeOpenIcon, Icon, HomeIcon, FlipLeftIcon, ColumnHorizontal, ReportIcon, UpgradeIcon, DarkIcon, LightIcon, BrandIcon, CategoryIcon, SettingsIcon, DownloadCloudIcon, PlayIcon, ReloadIcon, TextureIcon, ViewModeIcon, ZoomIcon };
60
66
  export type { IconProps };
package/dist/index.js CHANGED
@@ -55,4 +55,10 @@ import LightIcon from "./icons/LightIcon.svelte";
55
55
  import BrandIcon from "./icons/BrandIcon.svelte";
56
56
  import CategoryIcon from "./icons/CategoryIcon.svelte";
57
57
  import SettingsIcon from "./icons/SettingsIcon.svelte";
58
- export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, MaterialIcon, TrendUpIcon, ChartTrendUp, BellIcon, BezierIcon, CalendarIcon, CameraIcon, CertificateIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, CopyIcon, EditIcon, FavoriteIcon, FilterIcon, FlameIcon, FolderIcon, FolderPlusIcon, GridIcon, HourglassIcon, LockIcon, LogoutIcon, MenuIcon, NoFolder, NotificationIcon, OverlapIcon, SearchIcon, SendIcon, TeamUserIcon, TrashIcon, UploadIcon, UserProfileIcon, EyeClosedIcon, EyeOpenIcon, Icon, HomeIcon, FlipLeftIcon, ColumnHorizontal, ReportIcon, UpgradeIcon, DarkIcon, LightIcon, BrandIcon, CategoryIcon, SettingsIcon };
58
+ import DownloadCloudIcon from "./icons/DownloadCloudIcon.svelte";
59
+ import PlayIcon from "./icons/PlayIcon.svelte";
60
+ import ReloadIcon from "./icons/ReloadIcon.svelte";
61
+ import TextureIcon from "./icons/TextureIcon.svelte";
62
+ import ViewModeIcon from "./icons/ViewModeIcon.svelte";
63
+ import ZoomIcon from "./icons/ZoomIcon.svelte";
64
+ export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, MaterialIcon, TrendUpIcon, ChartTrendUp, BellIcon, BezierIcon, CalendarIcon, CameraIcon, CertificateIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, CopyIcon, EditIcon, FavoriteIcon, FilterIcon, FlameIcon, FolderIcon, FolderPlusIcon, GridIcon, HourglassIcon, LockIcon, LogoutIcon, MenuIcon, NoFolder, NotificationIcon, OverlapIcon, SearchIcon, SendIcon, TeamUserIcon, TrashIcon, UploadIcon, UserProfileIcon, EyeClosedIcon, EyeOpenIcon, Icon, HomeIcon, FlipLeftIcon, ColumnHorizontal, ReportIcon, UpgradeIcon, DarkIcon, LightIcon, BrandIcon, CategoryIcon, SettingsIcon, DownloadCloudIcon, PlayIcon, ReloadIcon, TextureIcon, ViewModeIcon, ZoomIcon };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chromia",
3
- "version": "0.0.14",
3
+ "version": "0.0.16",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vite dev",