Asset panel grouped by kind with icons: assets are listed under a header per kind (Sprites, Behaviors, ...) with the count on the right, empty groups are not shown, every group starts folded when a project is opened, a click on the header folds and unfolds it, selecting an asset elsewhere unfolds its group and folding the group of the selected asset clears the selection; every asset kind has an SVG icon in src/editor/panels/icons/ drawn before the name, the pure rule for grouping and sorting lives in assetGroups.ts; the same icons replace the kind word in document tabs and the overflow menu (a list icon for the List tab, which also fixes the close x lying over the end of the active tab's text), stand before every entry of the + menu (Button got an icon option) and on the right of scene object rows instead of the type name; the colour swatch next to sprite names is gone from both panels; the SVG loader moved to src/ui/svg.ts for both icon sets; test hook assetRow unfolds the group and scrolls to the row, assetRowShown only reads, new hook menuIcons; e2e 4g and 4h, 14 and 44a check the icons (#176)

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/viewport/symbolIcons.ts

@@ -1,10 +1,6 @@
-/**
- * The fixed pictures of the scene view's symbols, kept as SVG files in `icons/` (#175). A file
- * draws in the symbol's own units around its origin, and `currentColor` stands for the colour the
- * theme gives the symbol – so the file still shows in any SVG viewer, and a theme change reaches it.
- */
-import { type Graphics, SVGParser } from 'pixi.js';
-import { Theme } from '../ui';
+/** The fixed pictures of the scene view's symbols, kept as SVG files in `icons/` (#175). */
+import type { Graphics } from 'pixi.js';
+import { drawSvg, Theme } from '../ui';
 import behavior from './icons/behavior.svg?raw';
 import camera from './icons/camera.svg?raw';
 import container from './icons/container.svg?raw';
@@ -23,20 +19,7 @@ const SYMBOL_COLOR: Record<SymbolIcon, number> = {
   rigidbody: Theme.colors.collider,
 };
 
-export function tintSvg(svg: string, color: number): string {
-  return svg.replaceAll('currentColor', `#${color.toString(16).padStart(6, '0')}`);
-}
-
-/** Parsed once: a symbol is redrawn with every frame, and the text parse is what costs. */
-const parsed = new Map<SymbolIcon, SVGElement>();
-
 /** Adds the icon to what `node` already draws. */
 export function drawSymbolIcon(node: Graphics, icon: SymbolIcon): void {
-  let svg = parsed.get(icon);
-  if (!svg) {
-    const text = tintSvg(SYMBOL_SVG[icon], SYMBOL_COLOR[icon]);
-    svg = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement as unknown as SVGElement;
-    parsed.set(icon, svg);
-  }
-  SVGParser(svg, node.context);
+  drawSvg(node, SYMBOL_SVG[icon], SYMBOL_COLOR[icon]);
 }