chromia 0.1.2 → 0.1.4
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,85 @@
|
|
|
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 24"
|
|
29
|
+
fill="none"
|
|
30
|
+
>
|
|
31
|
+
<path
|
|
32
|
+
id="icon_CircleLock"
|
|
33
|
+
d="M17.6 13.2294C17.6 16.8583 14.6451 19.8001 11 19.8001C7.35495 19.8001 4.40002 16.8583 4.40002 13.2294C4.40002 9.60043 7.35495 6.6586 11 6.6586C14.6451 6.6586 17.6 9.60043 17.6 13.2294Z"
|
|
34
|
+
fill="#4E596D"
|
|
35
|
+
stroke-width={weight}
|
|
36
|
+
stroke-linecap="round"
|
|
37
|
+
stroke-linejoin="round"
|
|
38
|
+
/>
|
|
39
|
+
<path
|
|
40
|
+
d="M6.05002 8.30129V7.20624C6.05002 4.43291 8.25788 2.19995 11 2.19995C13.7422 2.19995 15.95 4.43291 15.95 7.20624V8.84885M11 14.3784V12.1784M17.6 13.2294C17.6 16.8583 14.6451 19.8001 11 19.8001C7.35495 19.8001 4.40002 16.8583 4.40002 13.2294C4.40002 9.60043 7.35495 6.6586 11 6.6586C14.6451 6.6586 17.6 9.60043 17.6 13.2294Z"
|
|
41
|
+
stroke="#AEBDD6"
|
|
42
|
+
/>
|
|
43
|
+
<defs>
|
|
44
|
+
<linearGradient
|
|
45
|
+
id="grad-CircleLock"
|
|
46
|
+
x1={getGradientDirection(gradient.direction).x1}
|
|
47
|
+
y1={getGradientDirection(gradient.direction).y1}
|
|
48
|
+
x2={getGradientDirection(gradient.direction).x2}
|
|
49
|
+
y2={getGradientDirection(gradient.direction).y2}
|
|
50
|
+
>
|
|
51
|
+
<stop
|
|
52
|
+
offset="0%"
|
|
53
|
+
style="stop-color:{gradient.colors[0]};stop-opacity:1"
|
|
54
|
+
/>
|
|
55
|
+
<stop
|
|
56
|
+
offset="100%"
|
|
57
|
+
style="stop-color:{gradient.colors[1]};stop-opacity:1"
|
|
58
|
+
/>
|
|
59
|
+
</linearGradient>
|
|
60
|
+
</defs>
|
|
61
|
+
</svg>
|
|
62
|
+
{:else}
|
|
63
|
+
<svg
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
style="width: {size}; height: {size};"
|
|
66
|
+
viewBox="0 0 24 24"
|
|
67
|
+
fill="none"
|
|
68
|
+
>
|
|
69
|
+
<path
|
|
70
|
+
id="icon_CircleLock"
|
|
71
|
+
d="M17.6 13.2294C17.6 16.8583 14.6451 19.8001 11 19.8001C7.35495 19.8001 4.40002 16.8583 4.40002 13.2294C4.40002 9.60043 7.35495 6.6586 11 6.6586C14.6451 6.6586 17.6 9.60043 17.6 13.2294Z"
|
|
72
|
+
stroke={color}
|
|
73
|
+
stroke-width={weight}
|
|
74
|
+
stroke-linecap="round"
|
|
75
|
+
stroke-linejoin="round"
|
|
76
|
+
/>
|
|
77
|
+
<path
|
|
78
|
+
d="M6.05002 8.30129V7.20624C6.05002 4.43291 8.25788 2.19995 11 2.19995C13.7422 2.19995 15.95 4.43291 15.95 7.20624V8.84885M11 14.3784V12.1784M17.6 13.2294C17.6 16.8583 14.6451 19.8001 11 19.8001C7.35495 19.8001 4.40002 16.8583 4.40002 13.2294C4.40002 9.60043 7.35495 6.6586 11 6.6586C14.6451 6.6586 17.6 9.60043 17.6 13.2294Z"
|
|
79
|
+
stroke={color}
|
|
80
|
+
stroke-width={weight}
|
|
81
|
+
stroke-linecap="round"
|
|
82
|
+
stroke-linejoin="round"
|
|
83
|
+
/>
|
|
84
|
+
</svg>
|
|
85
|
+
{/if}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
color?: string | undefined;
|
|
5
|
+
gradient?:
|
|
6
|
+
| {
|
|
7
|
+
colors: [string, string];
|
|
8
|
+
direction: "top" | "right" | "bottom" | "left";
|
|
9
|
+
}
|
|
10
|
+
| undefined;
|
|
11
|
+
size?: string | undefined;
|
|
12
|
+
weight?: number | undefined;
|
|
13
|
+
};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export type CircleLockIconProps = typeof __propDef.props;
|
|
20
|
+
export type CircleLockIconEvents = typeof __propDef.events;
|
|
21
|
+
export type CircleLockIconSlots = typeof __propDef.slots;
|
|
22
|
+
export default class CircleLockIcon extends SvelteComponent<
|
|
23
|
+
CircleLockIconProps,
|
|
24
|
+
CircleLockIconEvents,
|
|
25
|
+
CircleLockIconSlots
|
|
26
|
+
> {}
|
|
27
|
+
export {};
|
|
@@ -30,7 +30,7 @@ const getGradientDirection = (direction) => {
|
|
|
30
30
|
>
|
|
31
31
|
<path
|
|
32
32
|
id="icon_Email"
|
|
33
|
-
d="M3.15 4.
|
|
33
|
+
d="M3.15 4.94998L8.48771 8.64531C8.79591 8.85868 9.20409 8.85868 9.51229 8.64531L14.85 4.94998M3.6 14.4H14.4C15.3941 14.4 16.2 13.5941 16.2 12.6V5.39998C16.2 4.40586 15.3941 3.59998 14.4 3.59998H3.6C2.60589 3.59998 1.8 4.40586 1.8 5.39998V12.6C1.8 13.5941 2.60589 14.4 3.6 14.4Z"
|
|
34
34
|
stroke="url(#grad-Email)"
|
|
35
35
|
stroke-width={weight}
|
|
36
36
|
stroke-linecap="round"
|
|
@@ -64,7 +64,7 @@ const getGradientDirection = (direction) => {
|
|
|
64
64
|
>
|
|
65
65
|
<path
|
|
66
66
|
id="icon_Email"
|
|
67
|
-
d="M3.15 4.
|
|
67
|
+
d="M3.15 4.94998L8.48771 8.64531C8.79591 8.85868 9.20409 8.85868 9.51229 8.64531L14.85 4.94998M3.6 14.4H14.4C15.3941 14.4 16.2 13.5941 16.2 12.6V5.39998C16.2 4.40586 15.3941 3.59998 14.4 3.59998H3.6C2.60589 3.59998 1.8 4.40586 1.8 5.39998V12.6C1.8 13.5941 2.60589 14.4 3.6 14.4Z"
|
|
68
68
|
stroke={color}
|
|
69
69
|
stroke-width={weight}
|
|
70
70
|
stroke-linecap="round"
|
package/dist/index.d.ts
CHANGED
|
@@ -75,6 +75,7 @@ import BackArrowIcon from "./icons/BackArrowIcon.svelte";
|
|
|
75
75
|
import PinnedIcon from "./icons/PinnedIcon.svelte";
|
|
76
76
|
import CheckSemiCircleIcon from "./icons/CheckSemiCircleIcon.svelte";
|
|
77
77
|
import EmailIcon from "./icons/EmailIcon.svelte";
|
|
78
|
+
import CircleLockIcon from "./icons/CircleLockIcon.svelte";
|
|
78
79
|
import type IconProps from "./types/IconProps.ts";
|
|
79
|
-
export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, BackArrowIcon, BellIcon, PinnedIcon, BezierIcon, BoxIcon, BrandIcon, CalendarIcon, CameraIcon, CategoryIcon, CertificateIcon, ChartTrendUp, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, ColumnHorizontal, CopyIcon, CrownIcon, DarkIcon, DownloadCloudIcon, DownloadIcon, EditIcon, EyeClosedIcon, EyeOpenIcon, FavoriteIcon, FilterIcon, FlameIcon, FlipLeftIcon, FolderIcon, FolderPlusIcon, GridIcon, HeartIcon, HomeIcon, HourglassIcon, Icon, LightBulb01Icon, LightIcon, LockIcon, LogoutIcon, MaterialIcon, MenuIcon, MinimizeIcon, NoFolder, NotificationIcon, OverlapIcon, PinIcon, PlayIcon, ReloadIcon, ReportIcon, SearchIcon, SendIcon, SettingsIcon, StarIcon, TeamUserIcon, TextureIcon, TrashIcon, TrendUpIcon, UpgradeIcon, UploadIcon, UserProfileIcon, ViewModeIcon, ZoomIcon, ZoomSliderIcon, Edit01Icon, CheckSemiCircleIcon, EmailIcon, };
|
|
80
|
+
export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, BackArrowIcon, BellIcon, PinnedIcon, BezierIcon, BoxIcon, BrandIcon, CalendarIcon, CameraIcon, CategoryIcon, CertificateIcon, ChartTrendUp, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, ColumnHorizontal, CopyIcon, CrownIcon, DarkIcon, DownloadCloudIcon, DownloadIcon, EditIcon, EyeClosedIcon, EyeOpenIcon, FavoriteIcon, FilterIcon, FlameIcon, FlipLeftIcon, FolderIcon, FolderPlusIcon, GridIcon, HeartIcon, HomeIcon, HourglassIcon, Icon, LightBulb01Icon, LightIcon, LockIcon, LogoutIcon, MaterialIcon, MenuIcon, MinimizeIcon, NoFolder, NotificationIcon, OverlapIcon, PinIcon, PlayIcon, ReloadIcon, ReportIcon, SearchIcon, SendIcon, SettingsIcon, StarIcon, TeamUserIcon, TextureIcon, TrashIcon, TrendUpIcon, UpgradeIcon, UploadIcon, UserProfileIcon, ViewModeIcon, ZoomIcon, ZoomSliderIcon, Edit01Icon, CheckSemiCircleIcon, EmailIcon, CircleLockIcon, };
|
|
80
81
|
export type { IconProps };
|
package/dist/index.js
CHANGED
|
@@ -75,4 +75,5 @@ import BackArrowIcon from "./icons/BackArrowIcon.svelte";
|
|
|
75
75
|
import PinnedIcon from "./icons/PinnedIcon.svelte";
|
|
76
76
|
import CheckSemiCircleIcon from "./icons/CheckSemiCircleIcon.svelte";
|
|
77
77
|
import EmailIcon from "./icons/EmailIcon.svelte";
|
|
78
|
-
|
|
78
|
+
import CircleLockIcon from "./icons/CircleLockIcon.svelte";
|
|
79
|
+
export { AddImageIcon, AddSquareIcon, AlertCircleIcon, AnnotationXIcon, ArrowCalendarIcon, ArrowLeftIcon, ArrowSwitchIcon, ArrowUpIcon, BackArrowIcon, BellIcon, PinnedIcon, BezierIcon, BoxIcon, BrandIcon, CalendarIcon, CameraIcon, CategoryIcon, CertificateIcon, ChartTrendUp, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseIcon, CollectionIcon, ColumnHorizontal, CopyIcon, CrownIcon, DarkIcon, DownloadCloudIcon, DownloadIcon, EditIcon, EyeClosedIcon, EyeOpenIcon, FavoriteIcon, FilterIcon, FlameIcon, FlipLeftIcon, FolderIcon, FolderPlusIcon, GridIcon, HeartIcon, HomeIcon, HourglassIcon, Icon, LightBulb01Icon, LightIcon, LockIcon, LogoutIcon, MaterialIcon, MenuIcon, MinimizeIcon, NoFolder, NotificationIcon, OverlapIcon, PinIcon, PlayIcon, ReloadIcon, ReportIcon, SearchIcon, SendIcon, SettingsIcon, StarIcon, TeamUserIcon, TextureIcon, TrashIcon, TrendUpIcon, UpgradeIcon, UploadIcon, UserProfileIcon, ViewModeIcon, ZoomIcon, ZoomSliderIcon, Edit01Icon, CheckSemiCircleIcon, EmailIcon, CircleLockIcon, };
|