@stevederico/skateboard-ui 2.9.9 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+2.10.0
+
+  Fix landing page feature icons
+  Add FeatureIcon DynamicIcon resolver
+  Export canResolveIcon utility
+
 2.9.9
 
   Add proportional radius cascade

package/core/DynamicIcon.jsx

@@ -45,4 +45,14 @@ const DynamicIcon = ({ name, size = 24, color = "currentColor", strokeWidth = 2,
   return <Icon size={size} color={color} strokeWidth={strokeWidth} className={cn(className)} {...props} />;
 };
 
+/**
+ * Check if a name string resolves to a valid Lucide icon.
+ *
+ * @param {string} name - Icon name to check
+ * @returns {boolean} True if name resolves to an icon
+ */
+export function canResolveIcon(name) {
+  return resolveIcon(name) !== null;
+}
+
 export default DynamicIcon;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.9.9",
+  "version": "2.10.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/views/LandingView.jsx

@@ -2,13 +2,26 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from 'next-themes';
 import { getState } from "../core/Context.jsx";
-import DynamicIcon from '../core/DynamicIcon.jsx';
+import DynamicIcon, { canResolveIcon } from '../core/DynamicIcon.jsx';
 import { Sun, Moon, Check } from 'lucide-react';
 import { Button } from '../shadcn/ui/button.jsx';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../shadcn/ui/card.jsx';
 import { Badge } from '../shadcn/ui/badge.jsx';
 import { Separator } from '../shadcn/ui/separator.jsx';
 
+/**
+ * Renders a feature icon from a name string or emoji.
+ * Resolves Lucide icon names (kebab-case), falls back to raw text (emoji).
+ *
+ * @param {Object} props
+ * @param {string} props.name - Icon name (kebab-case) or emoji string
+ * @returns {JSX.Element} Icon component or text span
+ */
+function FeatureIcon({ name }) {
+  if (canResolveIcon(name)) return <DynamicIcon name={name} size={24} />;
+  return <span>{name}</span>;
+}
+
 /**
  * Default landing page with hero section, features grid, pricing card,
  * CTA section, and footer.
@@ -85,7 +98,9 @@ export default function LandingView() {
                 <Card key={index} className="text-center">
                   <CardHeader className="items-center">
                     <div className="w-full flex justify-center">
-                      <Badge variant="secondary" className="text-2xl mb-2 h-auto px-3 py-1">{feature.icon}</Badge>
+                      <Badge variant="secondary" className="text-2xl mb-2 h-auto px-3 py-1">
+                        <FeatureIcon name={feature.icon} />
+                      </Badge>
                     </div>
                     <CardTitle className="text-xl font-bold">{feature.title}</CardTitle>
                     <CardDescription>{feature.description}</CardDescription>