Replace PNG icons with Habbo-style SVG pixel art icons across index, nav, and mobile nav
- Create 20 Habbo-style pixel-art SVG icon components (home, user, catalog, star, community, games, enter, news, online, camera, chat, clock, heart, arrow, cog, furni, diamond, credits, duckets, rank) - Update index page: replace all PNG icon references, add pixel font headings, add Habbo-style gradient section headers - Update navigation: replace all PNG nav icons with Habbo SVG icons - Update NavDropdown: accept ReactNode icon instead of string path - Update mobile-nav: replace PNG brand icon with HabboHome SVG
This commit is contained in:
openhands committed
1 parent
255c09b9fd
commit
ac16df98c3
5 files changed
+575
-313
No files matched your search
@@ -0,0 +1,310 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
type IconProps = SVGProps<SVGSVGElement> & { size?: number };
|
||||
|
||||
function IconSvg({
|
||||
children,
|
||||
size = 24,
|
||||
viewBox = "0 0 24 24",
|
||||
...props
|
||||
}: IconProps & { viewBox?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox={viewBox}
|
||||
width={size}
|
||||
height={size}
|
||||
shapeRendering="crispEdges"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboHome({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="4" y="10" width="16" height="12" fill="#e8a317" rx="1" />
|
||||
<rect x="3" y="9" width="18" height="2" fill="#d4891a" />
|
||||
<polygon points="12,2 2,10 22,10" fill="#c0392b" />
|
||||
<polygon points="12,2 2,10 4,10" fill="#a93226" />
|
||||
<rect x="9" y="15" width="6" height="7" fill="#8B4513" rx="1" />
|
||||
<rect x="10" y="16" width="4" height="3" fill="#d4a017" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboUser({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="12" cy="6" r="4.5" fill="#f1c40f" />
|
||||
<rect x="5" y="11" width="14" height="12" fill="#3498db" rx="2" />
|
||||
<rect x="5" y="11" width="14" height="3" fill="#2980b9" rx="1" />
|
||||
<rect x="2" y="20" width="20" height="3" fill="#2c3e50" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboCatalog({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="3" y="4" width="18" height="16" fill="#e74c3c" rx="2" />
|
||||
<rect x="3" y="4" width="18" height="4" fill="#c0392b" rx="1" />
|
||||
<rect x="10" y="8" width="4" height="12" fill="#f1c40f" />
|
||||
<rect x="3" y="11" width="18" height="2" fill="#c0392b" />
|
||||
<rect x="8" y="4" width="8" height="3" fill="#f1c40f" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboStar({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="10" y="1" width="4" height="6" fill="#f1c40f" rx="1" />
|
||||
<rect x="10" y="17" width="4" height="6" fill="#f1c40f" rx="1" />
|
||||
<rect x="1" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
|
||||
<rect x="17" y="10" width="6" height="4" fill="#f1c40f" rx="1" />
|
||||
<rect x="6" y="5" width="4" height="4" fill="#f39c12" rx="1" />
|
||||
<rect x="14" y="5" width="4" height="4" fill="#f39c12" rx="1" />
|
||||
<rect x="6" y="15" width="4" height="4" fill="#f39c12" rx="1" />
|
||||
<rect x="14" y="15" width="4" height="4" fill="#f39c12" rx="1" />
|
||||
<rect x="9" y="9" width="6" height="6" fill="#f1c40f" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboCommunity({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="7" cy="7" r="4" fill="#2ecc71" />
|
||||
<circle cx="17" cy="7" r="4" fill="#3498db" />
|
||||
<rect x="2" y="13" width="10" height="9" fill="#2ecc71" rx="2" />
|
||||
<rect x="12" y="13" width="10" height="9" fill="#3498db" rx="2" />
|
||||
<rect x="2" y="13" width="10" height="3" fill="#27ae60" rx="1" />
|
||||
<rect x="12" y="13" width="10" height="3" fill="#2980b9" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboGames({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="2" y="7" width="20" height="12" fill="#9b59b6" rx="3" />
|
||||
<rect x="2" y="7" width="20" height="3" fill="#8e44ad" rx="1" />
|
||||
<circle cx="8" cy="14" r="2" fill="#f1c40f" />
|
||||
<rect x="12" y="12" width="6" height="4" fill="#ecf0f1" rx="1" />
|
||||
<circle cx="16" cy="14" r="1" fill="#e74c3c" />
|
||||
<rect x="4" y="4" width="3" height="4" fill="#e74c3c" rx="1" />
|
||||
<rect x="17" y="4" width="3" height="4" fill="#2ecc71" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboEnter({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="3" y="3" width="18" height="18" fill="#2ecc71" rx="2" />
|
||||
<rect x="3" y="3" width="18" height="4" fill="#27ae60" rx="1" />
|
||||
<polygon points="11,8 18,13 11,18" fill="#ecf0f1" />
|
||||
<rect x="5" y="11" width="8" height="4" fill="#27ae60" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboNews({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="3" y="2" width="18" height="20" fill="#ecf0f1" rx="2" />
|
||||
<rect x="3" y="2" width="18" height="4" fill="#e74c3c" rx="1" />
|
||||
<rect x="5" y="8" width="14" height="2" fill="#bdc3c7" rx="1" />
|
||||
<rect x="5" y="11" width="10" height="2" fill="#bdc3c7" rx="1" />
|
||||
<rect x="5" y="14" width="14" height="2" fill="#bdc3c7" rx="1" />
|
||||
<rect x="5" y="17" width="8" height="2" fill="#bdc3c7" rx="1" />
|
||||
<rect x="3" y="2" width="18" height="4" fill="#c0392b" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboOnline({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="8" cy="8" r="5" fill="#2ecc71" />
|
||||
<circle cx="16" cy="8" r="5" fill="#2ecc71" />
|
||||
<rect x="3" y="14" width="10" height="8" fill="#27ae60" rx="2" />
|
||||
<rect x="11" y="14" width="10" height="8" fill="#27ae60" rx="2" />
|
||||
<circle cx="8" cy="8" r="2" fill="#ecf0f1" />
|
||||
<circle cx="16" cy="8" r="2" fill="#ecf0f1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboCamera({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="4" y="7" width="16" height="12" fill="#7f8c8d" rx="2" />
|
||||
<rect x="4" y="7" width="16" height="3" fill="#6c7a7d" rx="1" />
|
||||
<rect x="9" y="4" width="6" height="4" fill="#2c3e50" rx="1" />
|
||||
<circle cx="12" cy="14" r="4" fill="#34495e" />
|
||||
<circle cx="12" cy="14" r="2.5" fill="#ecf0f1" />
|
||||
<rect x="16" y="9" width="2" height="2" fill="#e74c3c" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboChat({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="2" y="3" width="20" height="14" fill="#3498db" rx="2" />
|
||||
<rect x="2" y="3" width="20" height="3" fill="#2980b9" rx="1" />
|
||||
<polygon points="6,17 10,22 10,17" fill="#3498db" />
|
||||
<rect x="5" y="7" width="5" height="2" fill="#ecf0f1" rx="1" />
|
||||
<rect x="5" y="10" width="8" height="2" fill="#ecf0f1" rx="1" />
|
||||
<rect x="5" y="13" width="6" height="2" fill="#ecf0f1" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboClock({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="12" cy="12" r="10" fill="#ecf0f1" stroke="#bdc3c7" strokeWidth="1" />
|
||||
<circle cx="12" cy="12" r="3" fill="#f1c40f" />
|
||||
<rect x="11" y="5" width="2" height="7" fill="#2c3e50" rx="1" />
|
||||
<rect x="11" y="11" width="5" height="2" fill="#2c3e50" rx="1" />
|
||||
<circle cx="12" cy="12" r="1" fill="#e74c3c" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboHeart({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="3" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
|
||||
<rect x="15" y="5" width="6" height="6" fill="#e74c3c" rx="1" />
|
||||
<rect x="3" y="9" width="6" height="6" fill="#c0392b" rx="1" />
|
||||
<rect x="15" y="9" width="6" height="6" fill="#c0392b" rx="1" />
|
||||
<rect x="7" y="3" width="10" height="4" fill="#e74c3c" rx="1" />
|
||||
<rect x="7" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
|
||||
<rect x="15" y="15" width="2" height="4" fill="#e74c3c" rx="1" />
|
||||
<rect x="9" y="17" width="6" height="4" fill="#e74c3c" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboArrowRight({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="2" y="9" width="14" height="6" fill="#ecf0f1" rx="1" />
|
||||
<polygon points="16,3 24,12 16,21" fill="#2ecc71" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboCog({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="12" cy="12" r="5" fill="#7f8c8d" />
|
||||
<circle cx="12" cy="12" r="3" fill="#95a5a6" />
|
||||
<rect x="10" y="1" width="4" height="5" fill="#7f8c8d" rx="1" />
|
||||
<rect x="10" y="18" width="4" height="5" fill="#7f8c8d" rx="1" />
|
||||
<rect x="1" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
|
||||
<rect x="18" y="10" width="5" height="4" fill="#7f8c8d" rx="1" />
|
||||
<rect x="4" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
|
||||
<rect x="17" y="4" width="3" height="3" fill="#7f8c8d" rx="1" />
|
||||
<rect x="4" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
|
||||
<rect x="17" y="17" width="3" height="3" fill="#7f8c8d" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboFurni({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="4" y="6" width="7" height="12" fill="#e67e22" rx="1" />
|
||||
<rect x="13" y="6" width="7" height="12" fill="#e67e22" rx="1" />
|
||||
<rect x="2" y="4" width="11" height="3" fill="#d35400" rx="1" />
|
||||
<rect x="11" y="4" width="11" height="3" fill="#d35400" rx="1" />
|
||||
<rect x="6" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
|
||||
<rect x="15" y="14" width="3" height="4" fill="#f1c40f" rx="1" />
|
||||
<rect x="2" y="16" width="20" height="4" fill="#8B4513" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboDiamond({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="8" y="3" width="8" height="4" fill="#85e0e8" rx="1" />
|
||||
<rect x="4" y="7" width="16" height="4" fill="#6cc8d0" rx="1" />
|
||||
<rect x="2" y="11" width="20" height="4" fill="#5bb0b8" rx="1" />
|
||||
<rect x="4" y="15" width="16" height="4" fill="#4a98a0" rx="1" />
|
||||
<rect x="8" y="19" width="8" height="2" fill="#398088" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboCredits({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="12" cy="12" r="10" fill="#f1c40f" />
|
||||
<circle cx="12" cy="12" r="8" fill="#e67e22" />
|
||||
<rect x="10" y="5" width="4" height="14" fill="#f1c40f" rx="1" />
|
||||
<rect x="6" y="9" width="12" height="4" fill="#f1c40f" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboDuckets({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<circle cx="12" cy="12" r="10" fill="#e67e22" />
|
||||
<circle cx="12" cy="12" r="8" fill="#d35400" />
|
||||
<rect x="9" y="4" width="6" height="6" fill="#f39c12" rx="1" />
|
||||
<rect x="7" y="10" width="10" height="4" fill="#f39c12" rx="1" />
|
||||
<rect x="9" y="14" width="6" height="6" fill="#f39c12" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
export function HabboRank({ size, ...props }: IconProps) {
|
||||
return (
|
||||
<IconSvg size={size} viewBox="0 0 24 24" {...props}>
|
||||
<rect x="10" y="2" width="4" height="6" fill="#f1c40f" rx="1" />
|
||||
<rect x="6" y="8" width="12" height="4" fill="#2ecc71" rx="1" />
|
||||
<rect x="4" y="12" width="16" height="4" fill="#3498db" rx="1" />
|
||||
<rect x="2" y="16" width="20" height="4" fill="#9b59b6" rx="1" />
|
||||
<rect x="10" y="20" width="4" height="2" fill="#e74c3c" rx="1" />
|
||||
</IconSvg>
|
||||
);
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
home: HabboHome,
|
||||
user: HabboUser,
|
||||
catalog: HabboCatalog,
|
||||
star: HabboStar,
|
||||
community: HabboCommunity,
|
||||
games: HabboGames,
|
||||
enter: HabboEnter,
|
||||
news: HabboNews,
|
||||
online: HabboOnline,
|
||||
camera: HabboCamera,
|
||||
chat: HabboChat,
|
||||
clock: HabboClock,
|
||||
heart: HabboHeart,
|
||||
arrowRight: HabboArrowRight,
|
||||
cog: HabboCog,
|
||||
furni: HabboFurni,
|
||||
diamond: HabboDiamond,
|
||||
credits: HabboCredits,
|
||||
duckets: HabboDuckets,
|
||||
rank: HabboRank,
|
||||
};
|
||||
|
||||
export type HabboIconName = keyof typeof iconMap;
|
||||
|
||||
export function HabboIcon({ name, size, ...props }: IconProps & { name: HabboIconName }) {
|
||||
const Icon = iconMap[name];
|
||||
return <Icon size={size} {...props} />;
|
||||
}
|
||||
Reference in new issue
Block a user