marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add size prop to MulticaIcon bordered variant

Browse source 
Supports sm, md, lg sizes for flexible usage in different contexts.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-02-13 12:24:48 +08:00
parent 35ab158775
commit ca1c260735
1 changed files with 27 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

49
packages/ui/src/components/multica-icon.tsx
View file

@ -14,8 +14,18 @@ interface MulticaIconProps extends React.ComponentProps<"span"> {
* If true, show a border around the icon.
*/
bordered?: boolean;
/**
* Size of the bordered icon: "sm" (default), "md", "lg"
*/
size?: "sm" | "md" | "lg";
}
const borderedSizes = {
sm: { wrapper: "p-1.5", icon: "size-3.5" },
md: { wrapper: "p-2", icon: "size-4" },
lg: { wrapper: "p-2.5", icon: "size-5" },
};
/**
* Pure CSS 8-pointed asterisk icon matching the Multica logo.
* Uses currentColor so it adapts to light/dark themes automatically.
@ -26,6 +36,7 @@ export function MulticaIcon({
animate = false,
noSpin = false,
bordered = false,
size = "sm",
...props
}: MulticaIconProps) {
const [entranceDone, setEntranceDone] = useState(!animate);
@ -36,11 +47,22 @@ export function MulticaIcon({
return () => clearTimeout(timer);
}, [animate]);
const clipPath = `polygon(
45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
)`;
if (bordered) {
const sizeConfig = borderedSizes[size];
return (
<span
className={cn(
"inline-flex items-center justify-center p-1.5 border border-border rounded-md",
"inline-flex items-center justify-center border border-border rounded-md",
sizeConfig.wrapper,
className
)}
aria-hidden="true"
@ -48,23 +70,15 @@ export function MulticaIcon({
>
<span
className={cn(
"block size-3.5",
"block",
sizeConfig.icon,
!entranceDone && "animate-entrance-spin",
entranceDone && !noSpin && "hover:animate-spin"
)}
>
<span
className="block size-full bg-current"
style={{
clipPath: `polygon(
45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
)`,
}}
style={{ clipPath }}
/>
</span>
</span>
@ -84,16 +98,7 @@ export function MulticaIcon({
>
<span
className="block size-full bg-current"
style={{
clipPath: `polygon(
45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
)`,
}}
style={{ clipPath }}
/>
</span>
);