Revert "Replace PNG icons with Habbo-style SVG pixel art icons across index, nav, and mobile nav"
This reverts commit ac16df98c3.
This commit is contained in:
openhands committed
1 parent
ac16df98c3
commit
36d9046a8d
5 files changed
+313
-575
No files matched your search
@@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { type ReactNode, useRef, useState } from "react";
|
||||
import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
|
||||
import { mobileMenuVariants } from "@/lib/motion";
|
||||
import { HabboHome } from "@/components/shared/habbo-icons";
|
||||
|
||||
interface MobileNavProps {
|
||||
children: ReactNode;
|
||||
@@ -88,7 +88,13 @@ export function MobileNav({
|
||||
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<HabboHome size={22} />
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={22}
|
||||
height={22}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<span
|
||||
className="text-sm font-extrabold uppercase tracking-wide"
|
||||
style={{
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import { type ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { dropdownVariants } from "@/lib/motion";
|
||||
|
||||
interface NavDropdownProps {
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
icon?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
@@ -44,7 +45,14 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
|
||||
aria-expanded={open}
|
||||
>
|
||||
{icon ? (
|
||||
<span className="mr-1.5 flex items-center">{icon}</span>
|
||||
<Image
|
||||
src={icon}
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
unoptimized
|
||||
/>
|
||||
) : null}
|
||||
{label}
|
||||
<motion.svg
|
||||
|
||||
+125
-46
@@ -1,3 +1,4 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { Session } from "next-auth";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
@@ -8,17 +9,6 @@ import { NavbarColorPicker } from "@/components/navbar-color-picker";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
import { resolveHotelName } from "@/lib/hotel-name";
|
||||
import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
|
||||
import {
|
||||
HabboHome,
|
||||
HabboCommunity,
|
||||
HabboCatalog,
|
||||
HabboRank,
|
||||
HabboGames,
|
||||
HabboHeart,
|
||||
HabboOnline,
|
||||
HabboChat,
|
||||
HabboCog,
|
||||
} from "@/components/shared/habbo-icons";
|
||||
|
||||
export async function Navigation({ session }: { session: Session | null }) {
|
||||
const t = await getTranslations("nav");
|
||||
@@ -63,8 +53,14 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
{/* Desktop: home link */}
|
||||
<div className="hidden md:flex items-center gap-x-1">
|
||||
<Link href="/" className="nav-item shrink-0">
|
||||
<HabboHome size={18} />
|
||||
<span className="ml-1.5">{t("home")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/me.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
<span>{t("home")}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -72,7 +68,7 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
<div className="hidden md:flex items-center gap-x-1">
|
||||
<NavDropdown
|
||||
label={t("community")}
|
||||
icon={<HabboCommunity size={18} />}
|
||||
icon="/assets/images/icons/navigation/community.png"
|
||||
>
|
||||
<Link href="/news" className="dropdown-item" role="menuitem">
|
||||
{t("articles")}
|
||||
@@ -99,7 +95,7 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
|
||||
<NavDropdown
|
||||
label={t("shop")}
|
||||
icon={<HabboCatalog size={18} />}
|
||||
icon="/assets/images/icons/navigation/shop.png"
|
||||
>
|
||||
<Link href="/shop" className="dropdown-item" role="menuitem">
|
||||
{t("shop")}
|
||||
@@ -113,18 +109,30 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
</NavDropdown>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<HabboRank size={18} />
|
||||
<span className="ml-1.5">{t("leaderboards")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/leaderboards.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
<HabboGames size={18} />
|
||||
<span className="ml-1.5">{t("radio")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<NavDropdown
|
||||
label={t("assistance")}
|
||||
icon={<HabboHeart size={18} />}
|
||||
icon="/assets/images/icons/navigation/rules.gif"
|
||||
>
|
||||
<Link href="/help" className="dropdown-item" role="menuitem">
|
||||
{t("helpCenter")}
|
||||
@@ -149,27 +157,51 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
{session?.user ? (
|
||||
<>
|
||||
<Link href="/friends" className="nav-item">
|
||||
<HabboOnline size={18} />
|
||||
<span className="ml-1.5">{t("friends")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/goody.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("friends")}
|
||||
</Link>
|
||||
<Link href="/messages" className="nav-item">
|
||||
<HabboChat size={18} />
|
||||
<span className="ml-1.5">{t("messages")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("messages")}
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{showMod ? (
|
||||
<Link href="/mod" className="nav-item">
|
||||
<HabboCog size={18} />
|
||||
<span className="ml-1.5">{t("mod")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("mod")}
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
{showAdmin ? (
|
||||
<Link href="/admin" className="nav-item">
|
||||
<HabboCog size={18} />
|
||||
<span className="ml-1.5">{t("admin")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("admin")}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -181,13 +213,19 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
brandLabel={brandLabel}
|
||||
>
|
||||
<Link href="/" className="nav-item">
|
||||
<HabboHome size={18} />
|
||||
<span className="ml-1.5">{t("home")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/me.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("home")}
|
||||
</Link>
|
||||
|
||||
<NavDropdown
|
||||
label={t("community")}
|
||||
icon={<HabboCommunity size={18} />}
|
||||
icon="/assets/images/icons/navigation/community.png"
|
||||
>
|
||||
<Link href="/news" className="dropdown-item" role="menuitem">
|
||||
{t("articles")}
|
||||
@@ -214,7 +252,7 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
|
||||
<NavDropdown
|
||||
label={t("shop")}
|
||||
icon={<HabboCatalog size={18} />}
|
||||
icon="/assets/images/icons/navigation/shop.png"
|
||||
>
|
||||
<Link href="/shop" className="dropdown-item" role="menuitem">
|
||||
{t("shop")}
|
||||
@@ -228,18 +266,30 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
</NavDropdown>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<HabboRank size={18} />
|
||||
<span className="ml-1.5">{t("leaderboards")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/leaderboards.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
<HabboGames size={18} />
|
||||
<span className="ml-1.5">{t("radio")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<NavDropdown
|
||||
label={t("assistance")}
|
||||
icon={<HabboHeart size={18} />}
|
||||
icon="/assets/images/icons/navigation/rules.gif"
|
||||
>
|
||||
<Link href="/help" className="dropdown-item" role="menuitem">
|
||||
{t("helpCenter")}
|
||||
@@ -264,27 +314,51 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
{session?.user ? (
|
||||
<>
|
||||
<Link href="/friends" className="nav-item">
|
||||
<HabboOnline size={18} />
|
||||
<span className="ml-1.5">{t("friends")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/goody.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("friends")}
|
||||
</Link>
|
||||
<Link href="/messages" className="nav-item">
|
||||
<HabboChat size={18} />
|
||||
<span className="ml-1.5">{t("messages")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("messages")}
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{showMod ? (
|
||||
<Link href="/mod" className="nav-item">
|
||||
<HabboCog size={18} />
|
||||
<span className="ml-1.5">{t("mod")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("mod")}
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
{showAdmin ? (
|
||||
<Link href="/admin" className="nav-item">
|
||||
<HabboCog size={18} />
|
||||
<span className="ml-1.5">{t("admin")}</span>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("admin")}
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
@@ -307,7 +381,12 @@ export async function Navigation({ session }: { session: Session | null }) {
|
||||
className="ml-auto flex md:hidden items-center gap-2 shrink-0"
|
||||
aria-label="Home"
|
||||
>
|
||||
<HabboHome size={24} />
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={26}
|
||||
height={26}
|
||||
/>
|
||||
<span
|
||||
className="text-base font-extrabold uppercase tracking-wide"
|
||||
style={{
|
||||
|
||||
@@ -1,310 +0,0 @@
|
||||
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