@solidrt/components 0.0.39 → 0.0.41

package/AGENTS.md

@@ -75,13 +75,14 @@ Most components group props into two objects, plus top-level event handlers:
   `moduleSize`/`margin`/`radius`/`level` (L/M/Q/H). Paints black-on-white by
   default (NOT the theme) to stay scannable; override `color`/`background` only
   if contrast holds. Deps on `qrcode-generator`.
-- `Icon` - thin themed wrapper over the core `<svg>` document primitive. `src`
-  is an SVG string (an imported `.svg` asset, a `lucide-static` string export, or
-  an inline literal); `size` sets a square box (default 24); `color` drives
-  `currentColor` (default `theme.color.text`). Carries no icon set of its own and
-  no icon-name registry: pass the SVG string in, so any currentColor set (Lucide,
-  Feather, Heroicons) works and only used icons are bundled. Multi-color
-  documents keep their own fills. Reach for `<svg>` directly for a non-square box.
+- `Icon` - thin themed wrapper over the core `parseSvg` primitive (draws mapped
+  to `<d-path>` in a `viewBox`-fitted box). `src` is an SVG string (an imported
+  `.svg` asset, a `lucide-static` string export, or an inline literal); `size`
+  sets a square box (default 24); `color` drives `currentColor` (default
+  `theme.color.text`). Carries no icon set of its own and no icon-name registry:
+  pass the SVG string in, so any currentColor set (Lucide, Feather, Heroicons)
+  works and only used icons are bundled. Multi-color documents keep their own
+  fills. Reach for `parseSvg` directly for a non-square box.
 - `SafeArea` - pads children clear of system UI (notches, status bars); top and
   bottom on by default, pass `false`/a number per edge.
 - `theme` / `setTheme` / `darkTheme` / `lightTheme` - shared REACTIVE appearance

package/README.md

@@ -598,7 +598,7 @@ import { QrCode } from "@solidrt/components"
 
 ### Icon
 
-A thin themed wrapper over the core `<svg>` primitive. `src` is a whole SVG document as a string; the component draws it in a square box and, for monochrome icons that stroke/fill with `currentColor`, recolors it from the theme. It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `<svg>` directly.
+A thin themed wrapper over the core `parseSvg` primitive. `src` is a whole SVG document as a string; the component parses it once (memoized), maps the draws to `<d-path>` in a square `viewBox`-fitted box and, for monochrome icons that stroke/fill with `currentColor`, recolors it from the theme. It carries no icon set and no name registry, so any `currentColor` SVG works (Lucide, Feather, Heroicons) and only the icons you import are bundled. Multi-color documents keep their own fills. For a non-square box, use `parseSvg` directly.
 
 Icons are just SVG strings. Import them as assets (`import House from "lucide-static/icons/house.svg"`, resolved to a string), pull them from a string export, or inline a literal:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.26",
-    "@solidrt/core": "0.0.39"
+    "@solidrt/core": "0.0.41"
   }
 }

package/src/icon.tsx

@@ -1,3 +1,4 @@
+import { createMemo, parseSvg, For } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 
@@ -16,22 +17,28 @@ export interface IconProps {
 
 const SIZE = 24
 
-// A themed wrapper over the core <svg> document primitive: a square box sized to
-// `size` and colored from the theme by default. This is the only value it adds
-// over `<svg src>` directly, so reach for the primitive when you need a
-// non-square box or want no theme coupling.
+// A themed wrapper over parseSvg: the document parsed once per src/color (a
+// memo), its draws mapped to <d-path> in a square viewBox-fitted box colored
+// from the theme by default. That is the only value it adds, so reach for
+// parseSvg plus your own <view viewBox> when you need a non-square box or
+// want no theme coupling. The plain repaintBoundary keeps the static subtree
+// from re-recording alongside animating siblings; pointerEvents="all" makes
+// the box one hit unit (and skips per-path outline tests) - an icon's shapes
+// are never individual targets.
 export function Icon(props: IconProps) {
   let size = () => props.size ?? SIZE
+  let doc = createMemo(() => parseSvg(props.src, { color: props.color ?? theme.color.text }))
 
   return (
-    <view repaintBoundary>
-      <svg
-        width={size()}
-        height={size()}
-        src={props.src}
-        color={props.color ?? theme.color.text}
-        {...props.layout}
-      />
+    <view
+      repaintBoundary
+      pointerEvents="all"
+      width={size()}
+      height={size()}
+      viewBox={[doc().width, doc().height]}
+      {...props.layout}
+    >
+      <For each={doc().draws}>{(draw) => <d-path {...draw} />}</For>
     </view>
   )
 }