62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
interface DiscordLogoProps {
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
variant?: 'svg' | 'png';
|
|
className?: string;
|
|
alt?: string;
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-6 h-6',
|
|
lg: 'w-8 h-8',
|
|
xl: 'w-12 h-12'
|
|
};
|
|
|
|
// Logo Discord officiel en SVG
|
|
const DiscordSVG: React.FC<{ className?: string }> = ({ className }) => (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 127.14 96.36"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
export const DiscordLogo: React.FC<DiscordLogoProps> = ({
|
|
size = 'md',
|
|
variant = 'svg',
|
|
className = '',
|
|
alt = 'Discord'
|
|
}) => {
|
|
const baseClasses = sizeClasses[size];
|
|
const finalClassName = `${baseClasses} ${className}`;
|
|
|
|
if (variant === 'png') {
|
|
return (
|
|
<Image
|
|
src="/assets/discord-mark-blurple.png"
|
|
alt={alt}
|
|
width={size === 'sm' ? 16 : size === 'md' ? 24 : size === 'lg' ? 32 : 48}
|
|
height={size === 'sm' ? 16 : size === 'md' ? 24 : size === 'lg' ? 32 : 48}
|
|
className={finalClassName}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return <DiscordSVG className={finalClassName} />;
|
|
};
|
|
|
|
// Export du composant SVG pour usage direct
|
|
export const DiscordIcon = () => (
|
|
<DiscordLogo size="md" variant="svg" className="text-[#5865F2]" />
|
|
);
|
|
|
|
export default DiscordLogo; |