@uniweb/kit 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -39,7 +39,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.3.1"
+    "@uniweb/core": "0.3.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/Icon/Icon.jsx

@@ -38,24 +38,47 @@ const BUILT_IN_ICONS = {
  * @param {string} svgContent - Raw SVG string
  * @returns {Object} { viewBox, content, width, height }
  */
+/**
+ * Extract an attribute value from an SVG opening tag string
+ */
+function getAttr(svgTag, name) {
+  const match = svgTag.match(new RegExp(`${name}="([^"]*)"`, 'i'))
+  return match ? match[1] : null
+}
+
 function parseSvg(svgContent) {
   if (!svgContent) return null
 
   try {
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(svgContent, 'image/svg+xml')
-    const svg = doc.querySelector('svg')
+    // Extract the <svg ...> opening tag and inner content
+    // Works in both browser and Node.js (no DOMParser needed)
+    const svgTagMatch = svgContent.match(/<svg\s[^>]*>/i)
+    if (!svgTagMatch) return null
+
+    const svgTag = svgTagMatch[0]
 
-    if (!svg) return null
+    const viewBox = getAttr(svgTag, 'viewBox') || '0 0 24 24'
+    const width = getAttr(svgTag, 'width')
+    const height = getAttr(svgTag, 'height')
 
-    const viewBox = svg.getAttribute('viewBox') || '0 0 24 24'
-    const width = svg.getAttribute('width')
-    const height = svg.getAttribute('height')
+    // Preserve SVG presentation attributes from the source
+    // Different icon families use different rendering styles:
+    // - Lucide, Feather, Heroicons: stroke-based (fill="none", stroke="currentColor")
+    // - Font Awesome, Bootstrap: fill-based (fill="currentColor")
+    const fill = getAttr(svgTag, 'fill')
+    const stroke = getAttr(svgTag, 'stroke')
+    const strokeWidth = getAttr(svgTag, 'stroke-width')
+    const strokeLinecap = getAttr(svgTag, 'stroke-linecap')
+    const strokeLinejoin = getAttr(svgTag, 'stroke-linejoin')
 
-    // Get inner content
-    const content = svg.innerHTML
+    // Get inner content (everything between <svg> and </svg>)
+    const innerMatch = svgContent.match(/<svg\s[^>]*>([\s\S]*)<\/svg>/i)
+    const content = innerMatch ? innerMatch[1] : ''
 
-    return { viewBox, content, width, height }
+    return {
+      viewBox, content, width, height,
+      fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin
+    }
   } catch (error) {
     console.warn('[Icon] Error parsing SVG:', error)
     return null
@@ -115,25 +138,37 @@ export function Icon({
   errorComponent,
   ...props
 }) {
-  const [fetchedSvg, setFetchedSvg] = useState(null)
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(false)
-
   // Normalize props (handle legacy icon object)
   const iconLibrary = library || (typeof icon === 'object' ? icon.library : null)
   const iconUrl = url || (typeof icon === 'string' ? icon : icon?.url)
   const iconSvg = svg || (typeof icon === 'object' ? icon.svg : null)
   const iconName = name || (typeof icon === 'object' ? icon.name : null)
 
-  // Fetch SVG from URL or resolve from library
+  // Check sync cache for SSR (pre-populated by prerender)
+  const cachedSvg = useMemo(() => {
+    if (iconLibrary && iconName) {
+      const uniweb = getUniweb()
+      return uniweb?.getIconSync?.(iconLibrary, iconName) || null
+    }
+    return null
+  }, [iconLibrary, iconName])
+
+  const [fetchedSvg, setFetchedSvg] = useState(cachedSvg)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  // Fetch SVG from URL or resolve from library (client-side only)
   useEffect(() => {
+    // Already have SVG from cache or direct prop
+    if (cachedSvg || iconSvg) {
+      setFetchedSvg(cachedSvg)
+      return
+    }
+
     // Reset state when source changes
     setFetchedSvg(null)
     setError(false)
 
-    // Direct SVG - no fetch needed
-    if (iconSvg) return
-
     // URL-based fetch
     if (iconUrl) {
       setLoading(true)
@@ -178,7 +213,7 @@ export function Icon({
           })
       }
     }
-  }, [iconUrl, iconSvg, iconLibrary, iconName])
+  }, [iconUrl, iconSvg, iconLibrary, iconName, cachedSvg])
 
   // Determine the SVG content to render
   const svgData = useMemo(() => {
@@ -260,11 +295,26 @@ export function Icon({
     ...(color && !preserveColors ? { color } : {})
   }
 
+  // Determine fill/stroke from source SVG, built-in defaults, or fallback
+  const svgFill = svgData.isBuiltIn
+    ? 'none'
+    : preserveColors
+      ? undefined
+      : svgData.fill ?? 'currentColor'
+  const svgStroke = svgData.isBuiltIn
+    ? 'currentColor'
+    : preserveColors
+      ? undefined
+      : svgData.stroke ?? undefined
+
   return (
     <svg
       viewBox={svgData.viewBox}
-      fill={svgData.isBuiltIn ? 'none' : preserveColors ? undefined : 'currentColor'}
-      stroke={svgData.isBuiltIn ? 'currentColor' : undefined}
+      fill={svgFill}
+      stroke={svgStroke}
+      strokeWidth={svgData.strokeWidth ?? undefined}
+      strokeLinecap={svgData.strokeLinecap ?? undefined}
+      strokeLinejoin={svgData.strokeLinejoin ?? undefined}
       className={cn('inline-block', className)}
       style={style}
       role="img"