@principal-ai/logo-component 0.1.13 → 0.1.15
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.
- package/README.md +2 -1
- package/dist/Logo.d.ts +10 -2
- package/dist/Logo.js +43 -47
- package/dist/esm/Logo.js +43 -47
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -53,7 +53,8 @@ npm run export-icon -- --size=512 --color=#ff00ff --svg-only
|
|
|
53
53
|
|
|
54
54
|
- `--size <number>` – Output width and height in pixels (default: `1024`).
|
|
55
55
|
- `--color <hex>` – Stroke color for the wireframe (default: `#00ffff`).
|
|
56
|
-
- `--particle-color <hex>` –
|
|
56
|
+
- `--particle-color <hex>` – Orbiting particle color (defaults to `--color`).
|
|
57
|
+
- `--letter-color <hex>` – "P" letter dots color (defaults to `--particle-color`, then `--color`).
|
|
57
58
|
- `--opacity <0-1>` – Overrides the root SVG opacity (default: `1`).
|
|
58
59
|
- `--output <path>` – Destination directory (default: `exports`).
|
|
59
60
|
- `--name <string>` – Base file name used for the exports (default: `logo`).
|
package/dist/Logo.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ interface LogoProps {
|
|
|
5
5
|
color?: string;
|
|
6
6
|
/** Color for orbiting particles (defaults to color) */
|
|
7
7
|
particleColor?: string;
|
|
8
|
-
/** Color for the "P" letter
|
|
8
|
+
/** Color for the "P" letter in the center (defaults to particleColor, then color) */
|
|
9
9
|
letterColor?: string;
|
|
10
10
|
opacity?: number;
|
|
11
11
|
/** Color for horizontal latitude lines (defaults to color) */
|
|
@@ -14,7 +14,7 @@ interface LogoProps {
|
|
|
14
14
|
verticalColor?: string;
|
|
15
15
|
/** Color for diagonal grid lines (defaults to color) */
|
|
16
16
|
diagonalColor?: string;
|
|
17
|
-
/** Color for the main sphere outline (defaults to color) */
|
|
17
|
+
/** Color for the main sphere outline (defaults to accentColor, then color) */
|
|
18
18
|
outlineColor?: string;
|
|
19
19
|
/** Whether to show the main sphere outline */
|
|
20
20
|
showOutline?: boolean;
|
|
@@ -22,6 +22,14 @@ interface LogoProps {
|
|
|
22
22
|
axisColor?: string;
|
|
23
23
|
/** Whether to show the background glow effect */
|
|
24
24
|
showGlow?: boolean;
|
|
25
|
+
/** Accent color for the outer sphere outline (defaults to color) */
|
|
26
|
+
accentColor?: string;
|
|
27
|
+
/** Use a text-based P instead of dots (defaults to false) */
|
|
28
|
+
useTextLetter?: boolean;
|
|
29
|
+
/** Font family for text-based P (defaults to Georgia) */
|
|
30
|
+
letterFontFamily?: string;
|
|
31
|
+
/** Background color for the SVG */
|
|
32
|
+
backgroundColor?: string;
|
|
25
33
|
}
|
|
26
34
|
export declare const Logo: React.FC<LogoProps>;
|
|
27
35
|
export {};
|
package/dist/Logo.js
CHANGED
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Logo = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, }) => {
|
|
8
|
+
const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, useTextLetter = false, letterFontFamily = "Georgia, serif", backgroundColor, }) => {
|
|
9
9
|
const finalParticleColor = particleColor || color;
|
|
10
10
|
const finalLetterColor = letterColor || particleColor || color;
|
|
11
11
|
const finalHorizontalColor = horizontalColor || color;
|
|
12
12
|
const finalVerticalColor = verticalColor || color;
|
|
13
13
|
const finalDiagonalColor = diagonalColor || color;
|
|
14
|
-
const finalOutlineColor = outlineColor || color;
|
|
14
|
+
const finalOutlineColor = outlineColor || accentColor || color;
|
|
15
15
|
const finalAxisColor = axisColor || color;
|
|
16
16
|
return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
|
|
17
17
|
react_1.default.createElement("defs", null,
|
|
@@ -22,52 +22,48 @@ const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor
|
|
|
22
22
|
react_1.default.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
|
|
23
23
|
react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
|
|
24
24
|
react_1.default.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
|
|
25
|
+
backgroundColor && (react_1.default.createElement("rect", { x: "30", y: "30", width: "140", height: "140", fill: backgroundColor })),
|
|
25
26
|
showGlow && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
|
|
26
|
-
react_1.default.createElement("
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
react_1.default.createElement("
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
react_1.default.createElement("
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
react_1.default.createElement("
|
|
36
|
-
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
|
|
37
|
-
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
|
|
38
|
-
react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
39
|
-
react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
40
|
-
react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
41
|
-
react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
42
|
-
react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
43
|
-
react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
44
|
-
react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
45
|
-
react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
46
|
-
react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
47
|
-
react_1.default.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
48
|
-
react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
49
|
-
react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
50
|
-
react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
27
|
+
react_1.default.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "68", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
28
|
+
react_1.default.createElement("line", { x1: "100", y1: "167", x2: "100", y2: "132", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
29
|
+
react_1.default.createElement("line", { x1: "33", y1: "100", x2: "68", y2: "100", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
30
|
+
react_1.default.createElement("line", { x1: "167", y1: "100", x2: "132", y2: "100", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
31
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "32", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
|
|
32
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "32", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
|
|
33
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(30 100 100)" }),
|
|
34
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(60 100 100)" }),
|
|
35
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(120 100 100)" }),
|
|
36
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(150 100 100)" }),
|
|
51
37
|
showOutline && (react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
|
|
52
|
-
react_1.default.createElement("
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
react_1.default.createElement("
|
|
62
|
-
react_1.default.createElement("
|
|
63
|
-
|
|
64
|
-
react_1.default.createElement("
|
|
65
|
-
react_1.default.createElement("
|
|
66
|
-
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor,
|
|
67
|
-
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite",
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
react_1.default.createElement("
|
|
38
|
+
useTextLetter ? (react_1.default.createElement("text", { x: "100", y: "100", textAnchor: "middle", dominantBaseline: "central", fill: finalLetterColor, fontSize: "48", fontFamily: letterFontFamily, fontWeight: "bold", opacity: "0.9" }, "P")) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
39
|
+
react_1.default.createElement("circle", { cx: "90", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
40
|
+
react_1.default.createElement("circle", { cx: "90", cy: "86", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
41
|
+
react_1.default.createElement("circle", { cx: "90", cy: "93", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
42
|
+
react_1.default.createElement("circle", { cx: "90", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
43
|
+
react_1.default.createElement("circle", { cx: "90", cy: "107", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
44
|
+
react_1.default.createElement("circle", { cx: "90", cy: "114", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
45
|
+
react_1.default.createElement("circle", { cx: "90", cy: "121", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
46
|
+
react_1.default.createElement("circle", { cx: "97", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
47
|
+
react_1.default.createElement("circle", { cx: "104", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
48
|
+
react_1.default.createElement("circle", { cx: "111", cy: "86", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
49
|
+
react_1.default.createElement("circle", { cx: "111", cy: "93", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
50
|
+
react_1.default.createElement("circle", { cx: "104", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
51
|
+
react_1.default.createElement("circle", { cx: "97", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }))),
|
|
52
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
53
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,32 0 0,1 33,100 A 67,32 0 0,1 167,100" })),
|
|
54
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
55
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 100,33 A 32,67 0 0,0 100,167 A 32,67 0 0,0 100,33" })),
|
|
56
|
+
react_1.default.createElement("g", { transform: "rotate(30 100 100)" },
|
|
57
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
58
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,1 33,100 A 67,40 0 0,1 167,100" }))),
|
|
59
|
+
react_1.default.createElement("g", { transform: "rotate(60 100 100)" },
|
|
60
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
61
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,0 33,100 A 67,40 0 0,0 167,100" }))),
|
|
62
|
+
react_1.default.createElement("g", { transform: "rotate(120 100 100)" },
|
|
63
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
64
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,1 33,100 A 67,40 0 0,1 167,100" }))),
|
|
65
|
+
react_1.default.createElement("g", { transform: "rotate(150 100 100)" },
|
|
66
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
67
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,0 33,100 A 67,40 0 0,0 167,100" })))));
|
|
72
68
|
};
|
|
73
69
|
exports.Logo = Logo;
|
package/dist/esm/Logo.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, }) => {
|
|
2
|
+
export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, letterColor, opacity = 0.9, horizontalColor, verticalColor, diagonalColor, outlineColor, showOutline = true, axisColor, showGlow = false, accentColor, useTextLetter = false, letterFontFamily = "Georgia, serif", backgroundColor, }) => {
|
|
3
3
|
const finalParticleColor = particleColor || color;
|
|
4
4
|
const finalLetterColor = letterColor || particleColor || color;
|
|
5
5
|
const finalHorizontalColor = horizontalColor || color;
|
|
6
6
|
const finalVerticalColor = verticalColor || color;
|
|
7
7
|
const finalDiagonalColor = diagonalColor || color;
|
|
8
|
-
const finalOutlineColor = outlineColor || color;
|
|
8
|
+
const finalOutlineColor = outlineColor || accentColor || color;
|
|
9
9
|
const finalAxisColor = axisColor || color;
|
|
10
10
|
return (React.createElement("svg", { width: width, height: height, viewBox: "30 30 140 140", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
|
|
11
11
|
React.createElement("defs", null,
|
|
@@ -16,51 +16,47 @@ export const Logo = ({ width = 150, height = 150, color = "currentColor", partic
|
|
|
16
16
|
React.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
|
|
17
17
|
React.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
|
|
18
18
|
React.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
|
|
19
|
+
backgroundColor && (React.createElement("rect", { x: "30", y: "30", width: "140", height: "140", fill: backgroundColor })),
|
|
19
20
|
showGlow && (React.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" })),
|
|
20
|
-
React.createElement("
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
React.createElement("
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
React.createElement("
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
React.createElement("
|
|
30
|
-
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 0,0 A 53,67 0 1,0 0,-134 A 53,67 0 1,0 0,0" }),
|
|
31
|
-
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
|
|
32
|
-
React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
33
|
-
React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
34
|
-
React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
35
|
-
React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
36
|
-
React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
37
|
-
React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
38
|
-
React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
39
|
-
React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
40
|
-
React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
41
|
-
React.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
42
|
-
React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
43
|
-
React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
44
|
-
React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalLetterColor, opacity: "0.9" }),
|
|
21
|
+
React.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "68", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
22
|
+
React.createElement("line", { x1: "100", y1: "167", x2: "100", y2: "132", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
23
|
+
React.createElement("line", { x1: "33", y1: "100", x2: "68", y2: "100", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
24
|
+
React.createElement("line", { x1: "167", y1: "100", x2: "132", y2: "100", stroke: finalAxisColor, strokeWidth: "1", opacity: "0.7" }),
|
|
25
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "32", fill: "none", stroke: finalHorizontalColor, strokeWidth: "1", opacity: "0.7" }),
|
|
26
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "32", ry: "67", fill: "none", stroke: finalVerticalColor, strokeWidth: "1", opacity: "0.7" }),
|
|
27
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(30 100 100)" }),
|
|
28
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(60 100 100)" }),
|
|
29
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(120 100 100)" }),
|
|
30
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: finalDiagonalColor, strokeWidth: "1", opacity: "0.7", transform: "rotate(150 100 100)" }),
|
|
45
31
|
showOutline && (React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: finalOutlineColor, strokeWidth: "1.5", opacity: "0.9" })),
|
|
46
|
-
React.createElement("
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
React.createElement("
|
|
56
|
-
React.createElement("
|
|
57
|
-
|
|
58
|
-
React.createElement("
|
|
59
|
-
React.createElement("
|
|
60
|
-
React.createElement("circle", { r: "2.5", fill: finalParticleColor,
|
|
61
|
-
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite",
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
React.createElement("
|
|
32
|
+
useTextLetter ? (React.createElement("text", { x: "100", y: "100", textAnchor: "middle", dominantBaseline: "central", fill: finalLetterColor, fontSize: "48", fontFamily: letterFontFamily, fontWeight: "bold", opacity: "0.9" }, "P")) : (React.createElement(React.Fragment, null,
|
|
33
|
+
React.createElement("circle", { cx: "90", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
34
|
+
React.createElement("circle", { cx: "90", cy: "86", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
35
|
+
React.createElement("circle", { cx: "90", cy: "93", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
36
|
+
React.createElement("circle", { cx: "90", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
37
|
+
React.createElement("circle", { cx: "90", cy: "107", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
38
|
+
React.createElement("circle", { cx: "90", cy: "114", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
39
|
+
React.createElement("circle", { cx: "90", cy: "121", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
40
|
+
React.createElement("circle", { cx: "97", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
41
|
+
React.createElement("circle", { cx: "104", cy: "79", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
42
|
+
React.createElement("circle", { cx: "111", cy: "86", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
43
|
+
React.createElement("circle", { cx: "111", cy: "93", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
44
|
+
React.createElement("circle", { cx: "104", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }),
|
|
45
|
+
React.createElement("circle", { cx: "97", cy: "100", r: "2.5", fill: finalLetterColor, opacity: "0.9" }))),
|
|
46
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
47
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,32 0 0,1 33,100 A 67,32 0 0,1 167,100" })),
|
|
48
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
49
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 100,33 A 32,67 0 0,0 100,167 A 32,67 0 0,0 100,33" })),
|
|
50
|
+
React.createElement("g", { transform: "rotate(30 100 100)" },
|
|
51
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
52
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,1 33,100 A 67,40 0 0,1 167,100" }))),
|
|
53
|
+
React.createElement("g", { transform: "rotate(60 100 100)" },
|
|
54
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
55
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,0 33,100 A 67,40 0 0,0 167,100" }))),
|
|
56
|
+
React.createElement("g", { transform: "rotate(120 100 100)" },
|
|
57
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
58
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,1 33,100 A 67,40 0 0,1 167,100" }))),
|
|
59
|
+
React.createElement("g", { transform: "rotate(150 100 100)" },
|
|
60
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, opacity: "0.9" },
|
|
61
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", path: "M 167,100 A 67,40 0 0,0 33,100 A 67,40 0 0,0 167,100" })))));
|
|
66
62
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ai/logo-component",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"description": "Animated wireframe sphere logo component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"react": "^18.0.0 || ^19.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
+
"@principal-ade/industry-theme": "^0.1.19",
|
|
29
30
|
"@storybook/addon-essentials": "^8.6.14",
|
|
30
31
|
"@storybook/blocks": "^8.6.14",
|
|
31
32
|
"@storybook/react": "^8.6.14",
|