feat: better icons and sizing

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx

@@ -1,3 +1,4 @@
+import { BLITZKIT_TANK_ICON_SIZE } from '@blitzkit/core';
 import { Canvas } from '@react-three/fiber';
 import {
   forwardRef,
@@ -182,8 +183,8 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         }}
         style={{
           userSelect: 'none',
-          width: naked ? 640 : '100%',
-          height: naked ? 480 : '100%',
+          width: naked ? BLITZKIT_TANK_ICON_SIZE.width : '100%',
+          height: naked ? BLITZKIT_TANK_ICON_SIZE.height : '100%',
           outline: naked ? '1rem red solid' : undefined,
         }}
       >

packages/website/src/components/Tankopedia/HeroSection/components/TankSandboxLoader.tsx

@@ -1,4 +1,4 @@
-import { tankIcon } from '@blitzkit/core';
+import { asset } from '@blitzkit/core';
 import { Flex, type FlexProps, Progress } from '@radix-ui/themes';
 import { useProgress } from '@react-three/drei';
 
@@ -11,7 +11,10 @@ export function TankSandboxLoader({ id, ...props }: TankSandboxLoaderProps) {
 
   return (
     <Flex width="100%" height="100%" align="center" justify="center" {...props}>
-      <img src={tankIcon(id)} style={{ height: '60%', filter: 'blur(4px)' }} />
+      <img
+        src={asset(`icons/tanks/blitzkit/${id}.webp`)}
+        style={{ height: '60%', filter: 'blur(4px)' }}
+      />
       <Progress
         size="3"
         value={data.progress}