chromia 0.1.6 → 0.1.8
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.
|
@@ -25,7 +25,7 @@ const getGradientDirection = (direction) => {
|
|
|
25
25
|
<svg
|
|
26
26
|
xmlns="http://www.w3.org/2000/svg"
|
|
27
27
|
style="width: {size}; height: {size};"
|
|
28
|
-
viewBox="0 0 18
|
|
28
|
+
viewBox="0 0 18 18"
|
|
29
29
|
fill="none"
|
|
30
30
|
>
|
|
31
31
|
<path
|
|
@@ -59,7 +59,7 @@ const getGradientDirection = (direction) => {
|
|
|
59
59
|
<svg
|
|
60
60
|
xmlns="http://www.w3.org/2000/svg"
|
|
61
61
|
style="width: {size}; height: {size};"
|
|
62
|
-
viewBox="0 0
|
|
62
|
+
viewBox="0 0 18 18"
|
|
63
63
|
fill="none"
|
|
64
64
|
>
|
|
65
65
|
<path
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<script>export let color = "#000";
|
|
2
|
+
export let fillColor = "none";
|
|
3
|
+
export let gradient = {
|
|
4
|
+
colors: ["", ""],
|
|
5
|
+
direction: "bottom"
|
|
6
|
+
};
|
|
7
|
+
export let size = "1rem";
|
|
8
|
+
export let weight = 1;
|
|
9
|
+
const getGradientDirection = (direction) => {
|
|
10
|
+
switch (direction) {
|
|
11
|
+
case "top":
|
|
12
|
+
return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
|
|
13
|
+
case "right":
|
|
14
|
+
return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
|
|
15
|
+
case "bottom":
|
|
16
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
17
|
+
case "left":
|
|
18
|
+
return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
|
|
19
|
+
default:
|
|
20
|
+
return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#if gradient.colors[1] !== ""}
|
|
26
|
+
<svg
|
|
27
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
28
|
+
style="width: {size}; height: {size};"
|
|
29
|
+
viewBox="0 0 14 14"
|
|
30
|
+
fill="none"
|
|
31
|
+
>
|
|
32
|
+
<path
|
|
33
|
+
id="icon_Sparkle"
|
|
34
|
+
d="M6.16067 1.01475C6.41463 0.328417 7.38537 0.328417 7.63933 1.01475L8.9034 4.43084C8.98325 4.64662 9.15338 4.81675 9.36916 4.8966L12.7853 6.16067C13.4716 6.41463 13.4716 7.38537 12.7853 7.63933L9.36916 8.9034C9.15338 8.98325 8.98325 9.15338 8.9034 9.36916L7.63933 12.7853C7.38537 13.4716 6.41463 13.4716 6.16067 12.7853L4.8966 9.36916C4.81675 9.15338 4.64662 8.98325 4.43084 8.9034L1.01475 7.63933C0.328417 7.38537 0.328417 6.41463 1.01475 6.16067L4.43084 4.8966C4.64662 4.81675 4.81675 4.64662 4.8966 4.43084L6.16067 1.01475Z"
|
|
35
|
+
stroke="url(#grad-Sparkle)"
|
|
36
|
+
stroke-width={weight}
|
|
37
|
+
fill={fillColor}
|
|
38
|
+
stroke-linecap="round"
|
|
39
|
+
stroke-linejoin="round"
|
|
40
|
+
/>
|
|
41
|
+
<defs>
|
|
42
|
+
<linearGradient
|
|
43
|
+
id="grad-Sparkle"
|
|
44
|
+
x1={getGradientDirection(gradient.direction).x1}
|
|
45
|
+
y1={getGradientDirection(gradient.direction).y1}
|
|
46
|
+
x2={getGradientDirection(gradient.direction).x2}
|
|
47
|
+
y2={getGradientDirection(gradient.direction).y2}
|
|
48
|
+
>
|
|
49
|
+
<stop
|
|
50
|
+
offset="0%"
|
|
51
|
+
style="stop-color:{gradient.colors[0]};stop-opacity:1"
|
|
52
|
+
/>
|
|
53
|
+
<stop
|
|
54
|
+
offset="100%"
|
|
55
|
+
style="stop-color:{gradient.colors[1]};stop-opacity:1"
|
|
56
|
+
/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
</defs>
|
|
59
|
+
</svg>
|
|
60
|
+
{:else}
|
|
61
|
+
<svg
|
|
62
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
63
|
+
style="width: {size}; height: {size};"
|
|
64
|
+
viewBox="0 0 14 14"
|
|
65
|
+
fill="none"
|
|
66
|
+
>
|
|
67
|
+
<path
|
|
68
|
+
id="icon_Sparkle"
|
|
69
|
+
d="M6.16067 1.01475C6.41463 0.328417 7.38537 0.328417 7.63933 1.01475L8.9034 4.43084C8.98325 4.64662 9.15338 4.81675 9.36916 4.8966L12.7853 6.16067C13.4716 6.41463 13.4716 7.38537 12.7853 7.63933L9.36916 8.9034C9.15338 8.98325 8.98325 9.15338 8.9034 9.36916L7.63933 12.7853C7.38537 13.4716 6.41463 13.4716 6.16067 12.7853L4.8966 9.36916C4.81675 9.15338 4.64662 8.98325 4.43084 8.9034L1.01475 7.63933C0.328417 7.38537 0.328417 6.41463 1.01475 6.16067L4.43084 4.8966C4.64662 4.81675 4.81675 4.64662 4.8966 4.43084L6.16067 1.01475Z"
|
|
70
|
+
fill={fillColor}
|
|
71
|
+
stroke={color}
|
|
72
|
+
stroke-width={weight}
|
|
73
|
+
stroke-linecap="round"
|
|
74
|
+
stroke-linejoin="round"
|
|
75
|
+
/>
|
|
76
|
+
</svg>
|
|
77
|
+
{/if}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
color?: string | undefined;
|
|
5
|
+
fillColor?: string | undefined;
|
|
6
|
+
gradient?: {
|
|
7
|
+
colors: [string, string];
|
|
8
|
+
direction: "top" | "right" | "bottom" | "left";
|
|
9
|
+
} | undefined;
|
|
10
|
+
size?: string | undefined;
|
|
11
|
+
weight?: number | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export type SparkleIconProps = typeof __propDef.props;
|
|
19
|
+
export type SparkleIconEvents = typeof __propDef.events;
|
|
20
|
+
export type SparkleIconSlots = typeof __propDef.slots;
|
|
21
|
+
export default class SparkleIcon extends SvelteComponent<SparkleIconProps, SparkleIconEvents, SparkleIconSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -76,6 +76,7 @@ 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
|
+
import SparkleIcon from "./icons/SparkleIcon.svelte";
|
|
79
80
|
import type IconProps from "./types/IconProps.ts";
|
|
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, };
|
|
81
|
+
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, SparkleIcon, };
|
|
81
82
|
export type { IconProps };
|
package/dist/index.js
CHANGED
|
@@ -76,4 +76,5 @@ 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
|
-
|
|
79
|
+
import SparkleIcon from "./icons/SparkleIcon.svelte";
|
|
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, SparkleIcon, };
|