78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface LogoProps {
|
|
size?: 'small' | 'medium' | 'large';
|
|
className?: string;
|
|
}
|
|
|
|
const InnovationLogo: React.FC<LogoProps> = ({
|
|
size = 'medium',
|
|
className = ''
|
|
}) => {
|
|
const sizeClasses = {
|
|
small: 'w-8 h-8',
|
|
medium: 'w-16 h-16',
|
|
large: 'w-24 h-24'
|
|
};
|
|
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 200 200"
|
|
className={`${sizeClasses[size]} ${className}`}
|
|
>
|
|
{/* 背景圆形 */}
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="90"
|
|
fill="#1A1A1A"
|
|
className="transition-colors duration-300"
|
|
/>
|
|
|
|
{/* 六边形原子核心 */}
|
|
<polygon
|
|
points="100,20 160,55 160,125 100,160 40,125 40,55"
|
|
fill="none"
|
|
stroke="#61DAFB"
|
|
strokeWidth="12"
|
|
className="transition-all duration-500 hover:stroke-blue-400"
|
|
/>
|
|
|
|
{/* 三个原子轨道 */}
|
|
<g stroke="#61DAFB" strokeWidth="4" fill="none">
|
|
{/* 外层轨道 */}
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="80"
|
|
className="animate-spin-slow opacity-50"
|
|
/>
|
|
{/* 中层轨道 */}
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="60"
|
|
className="animate-spin-reverse-slow opacity-50"
|
|
/>
|
|
{/* 内层轨道 */}
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="40"
|
|
className="animate-spin-slow opacity-50"
|
|
/>
|
|
</g>
|
|
|
|
{/* 闪电/创新元素 */}
|
|
<path
|
|
d="M80,110 L120,90 L100,140 Z"
|
|
fill="#FFD700"
|
|
className="transition-all duration-300 hover:scale-110"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default InnovationLogo;
|