{
  "name": "Icon",
  "category": "Utility",
  "subcategory": null,
  "description": "Icon wrapper — renders Lucide icons via Blazicons.",
  "thumbnail": "/preview-cards/icon.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Icon/Icon.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "Icon",
    "category": "Utility",
    "subcategory": null,
    "description": "Icon wrapper — renders Lucide icons via Blazicons.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Icon/Icon.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Name",
        "type": "string?",
        "default": null,
        "description": "Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (Lucide or any other Blazicons library).",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Svg",
        "type": "SvgIcon?",
        "default": null,
        "description": "Direct Blazicons SvgIcon reference — takes precedence over Name. Lets consumers use any icon library (Lucide, Bootstrap, FluentUI, Material, FontAwesome, Ionicons, MDI).",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "IconSize",
        "default": "IconSize.Md",
        "description": "Size preset. Sets Tailwind h-{n} w-{n} on the SVG. Defaults to Md (h-4 w-4).",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "IconSize",
        "values": [
          "Xs",
          "Sm",
          "Md",
          "Lg",
          "Xl"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "icon",
  "docsUrl": "https://lumeo.nativ.sh/components/icon",
  "sourceUrl": [
    {
      "file": "UI/Icon/Icon.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Icon/Icon.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Icon/Icon.razor",
      "content": "@namespace Lumeo\n@using Blazicons\n\n<Blazicon Svg=\"@ResolvedSvg\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\" />\n\n@code {\n    /// <summary>\n    /// Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\").\n    /// Unknown names fall back to a Circle. Use <see cref=\"Svg\"/> to supply any\n    /// icon directly (Lucide or any other Blazicons library).\n    /// </summary>\n    [Parameter] public string? Name { get; set; }\n\n    /// <summary>\n    /// Direct Blazicons <see cref=\"SvgIcon\"/> reference — takes precedence over <see cref=\"Name\"/>.\n    /// Lets consumers use any icon library (Lucide, Bootstrap, FluentUI, Material, FontAwesome, Ionicons, MDI).\n    /// </summary>\n    [Parameter] public SvgIcon? Svg { get; set; }\n\n    /// <summary>Size preset. Sets Tailwind <c>h-{n} w-{n}</c> on the SVG. Defaults to <see cref=\"IconSize.Md\"/> (h-4 w-4).</summary>\n    [Parameter] public IconSize Size { get; set; } = IconSize.Md;\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private SvgIcon ResolvedSvg => Svg ?? MapName(Name);\n\n    private string CssClass => $\"{SizeClass} {Class}\".Trim();\n\n    private string SizeClass => Size switch\n    {\n        IconSize.Xs => \"h-3 w-3\",\n        IconSize.Sm => \"h-3.5 w-3.5\",\n        IconSize.Lg => \"h-5 w-5\",\n        IconSize.Xl => \"h-6 w-6\",\n        _ => \"h-4 w-4\",\n    };\n\n    // Common UI icon name → Lucide mapping. Covers the set used across Lumeo's\n    // own components plus the typical app chrome vocabulary. Unknown names fall\n    // back to Circle — consumers can always pass `Svg` directly for uncommon icons.\n    private static SvgIcon MapName(string? name) => name switch\n    {\n        null or \"\" => Lucide.Circle,\n        \"Accessibility\" => Lucide.Accessibility,\n        \"Activity\" => Lucide.Activity,\n        \"AlertCircle\" or \"CircleAlert\" => Lucide.CircleAlert,\n        \"AlertTriangle\" or \"TriangleAlert\" => Lucide.TriangleAlert,\n        \"AlignCenter\" => Lucide.AlignCenterHorizontal,\n        \"AlignLeft\" => Lucide.AlignStartHorizontal,\n        \"AlignRight\" => Lucide.AlignEndHorizontal,\n        \"Apple\" => Lucide.Apple,\n        \"Archive\" => Lucide.Archive,\n        \"ArrowDown\" => Lucide.ArrowDown,\n        \"ArrowLeft\" => Lucide.ArrowLeft,\n        \"ArrowRight\" => Lucide.ArrowRight,\n        \"ArrowUp\" => Lucide.ArrowUp,\n        \"ArrowUpRight\" => Lucide.ArrowUpRight,\n        \"AtSign\" => Lucide.AtSign,\n        \"BadgeCheck\" => Lucide.BadgeCheck,\n        \"BarChart3\" or \"ChartBar\" => Lucide.ChartBar,\n        \"Bell\" => Lucide.Bell,\n        \"BellOff\" => Lucide.BellOff,\n        \"Bold\" => Lucide.Bold,\n        \"Bookmark\" => Lucide.Bookmark,\n        \"Box\" => Lucide.Box,\n        \"Calendar\" => Lucide.Calendar,\n        \"CalendarDays\" => Lucide.CalendarDays,\n        \"Camera\" => Lucide.Camera,\n        \"Check\" => Lucide.Check,\n        \"CheckCheck\" => Lucide.CheckCheck,\n        \"CheckCircle2\" or \"CircleCheck\" => Lucide.CircleCheck,\n        \"CheckSquare\" => Lucide.SquareCheck,\n        \"ChevronDown\" => Lucide.ChevronDown,\n        \"ChevronLeft\" => Lucide.ChevronLeft,\n        \"ChevronRight\" => Lucide.ChevronRight,\n        \"ChevronUp\" => Lucide.ChevronUp,\n        \"ChevronsUpDown\" => Lucide.ChevronsUpDown,\n        \"Chrome\" => Lucide.Globe,\n        \"Circle\" => Lucide.Circle,\n        \"CircleDot\" => Lucide.CircleDot,\n        \"Clipboard\" => Lucide.Clipboard,\n        \"Clock\" => Lucide.Clock,\n        \"Code\" => Lucide.Code,\n        \"Copy\" => Lucide.Copy,\n        \"CreditCard\" => Lucide.CreditCard,\n        \"DollarSign\" => Lucide.DollarSign,\n        \"Download\" => Lucide.Download,\n        \"Edit\" or \"Pencil\" => Lucide.Pencil,\n        \"Ellipsis\" => Lucide.Ellipsis,\n        \"ExternalLink\" => Lucide.ExternalLink,\n        \"Eye\" => Lucide.Eye,\n        \"EyeOff\" => Lucide.EyeOff,\n        \"FileEdit\" => Lucide.FilePen,\n        \"FileText\" => Lucide.FileText,\n        \"Filter\" => Lucide.Funnel,\n        \"Flag\" => Lucide.Flag,\n        \"Folder\" => Lucide.Folder,\n        \"FolderOpen\" => Lucide.FolderOpen,\n        \"Github\" => Lucide.Github,\n        \"Globe\" => Lucide.Globe,\n        \"Heading1\" => Lucide.Heading1,\n        \"Heading2\" => Lucide.Heading2,\n        \"Heading3\" => Lucide.Heading3,\n        \"Heart\" => Lucide.Heart,\n        \"Home\" or \"House\" => Lucide.House,\n        \"Image\" => Lucide.Image,\n        \"Inbox\" => Lucide.Inbox,\n        \"Info\" => Lucide.Info,\n        \"Italic\" => Lucide.Italic,\n        \"LayoutDashboard\" => Lucide.LayoutDashboard,\n        \"LayoutGrid\" => Lucide.LayoutGrid,\n        \"LineChart\" => Lucide.ChartLine,\n        \"Link\" => Lucide.Link,\n        \"Link2Off\" or \"Unlink\" => Lucide.Link2Off,\n        \"List\" => Lucide.List,\n        \"ListOrdered\" => Lucide.ListOrdered,\n        \"Loader\" => Lucide.Loader,\n        \"Lock\" => Lucide.Lock,\n        \"LogIn\" => Lucide.LogIn,\n        \"LogOut\" => Lucide.LogOut,\n        \"Mail\" => Lucide.Mail,\n        \"MapPin\" => Lucide.MapPin,\n        \"Menu\" => Lucide.Menu,\n        \"MessageCircle\" => Lucide.MessageCircle,\n        \"MessageSquare\" => Lucide.MessageSquare,\n        \"Mic\" => Lucide.Mic,\n        \"Minus\" => Lucide.Minus,\n        \"Moon\" => Lucide.Moon,\n        \"MoreHorizontal\" => Lucide.Ellipsis,\n        \"MousePointerClick\" => Lucide.MousePointerClick,\n        \"Music\" => Lucide.Music,\n        \"Package\" => Lucide.Package,\n        \"Palette\" => Lucide.Palette,\n        \"Paperclip\" => Lucide.Paperclip,\n        \"Pause\" => Lucide.Pause,\n        \"Phone\" => Lucide.Phone,\n        \"PieChart\" => Lucide.ChartPie,\n        \"Pilcrow\" => Lucide.Pilcrow,\n        \"Pin\" => Lucide.Pin,\n        \"Play\" => Lucide.Play,\n        \"Plus\" => Lucide.Plus,\n        \"Quote\" => Lucide.Quote,\n        \"Redo\" => Lucide.Redo,\n        \"RefreshCw\" => Lucide.RefreshCw,\n        \"RemoveFormatting\" => Lucide.RemoveFormatting,\n        \"Search\" => Lucide.Search,\n        \"Send\" => Lucide.Send,\n        \"Settings\" => Lucide.Settings,\n        \"Share\" or \"Share2\" => Lucide.Share2,\n        \"Shield\" => Lucide.Shield,\n        \"ShieldAlert\" => Lucide.ShieldAlert,\n        \"ShieldCheck\" => Lucide.ShieldCheck,\n        \"ShoppingBag\" => Lucide.ShoppingBag,\n        \"ShoppingCart\" => Lucide.ShoppingCart,\n        \"SkipBack\" => Lucide.SkipBack,\n        \"SkipForward\" => Lucide.SkipForward,\n        \"SlidersHorizontal\" => Lucide.SlidersHorizontal,\n        \"Smile\" => Lucide.Smile,\n        \"SquareCode\" => Lucide.SquareCode,\n        \"SquarePen\" => Lucide.SquarePen,\n        \"Star\" => Lucide.Star,\n        \"Strikethrough\" => Lucide.Strikethrough,\n        \"Sun\" => Lucide.Sun,\n        \"Tag\" => Lucide.Tag,\n        \"Trash\" or \"Trash2\" => Lucide.Trash2,\n        \"TrendingDown\" => Lucide.TrendingDown,\n        \"TrendingUp\" => Lucide.TrendingUp,\n        \"Truck\" => Lucide.Truck,\n        \"Underline\" => Lucide.Underline,\n        \"Undo\" => Lucide.Undo,\n        \"Upload\" => Lucide.Upload,\n        \"User\" => Lucide.User,\n        \"UserPlus\" => Lucide.UserPlus,\n        \"Users\" => Lucide.Users,\n        \"Video\" => Lucide.Video,\n        \"Volume2\" => Lucide.Volume2,\n        \"Wallet\" => Lucide.Wallet,\n        \"X\" => Lucide.X,\n        \"Zap\" => Lucide.Zap,\n        _ => Lucide.Circle,\n    };\n\n    public enum IconSize { Xs, Sm, Md, Lg, Xl }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Badge/BadgeTests.cs",
    "tests/Lumeo.Tests/Components/Button/ButtonTests.cs"
  ],
  "mdSummary": "# Icon\n\nIcon wrapper — renders Lucide icons via Blazicons.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/icon\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Icon | Name | `string?` | `` | Lucide icon name (PascalCase, e.g. \"Search\", \"ChevronDown\", \"TrendingUp\"). Unknown names fall back to a Circle. Use Svg to supply any icon directly (Lucide or any other Blazicons library). |\n| Icon | Svg | `SvgIcon?` | `` | Direct Blazicons SvgIcon reference — takes precedence over Name. Lets consumers use any icon library (Lucide, Bootstrap, FluentUI, Material, FontAwesome, Ionicons, MDI). |\n| Icon | Size | `IconSize` | `IconSize.Md` | Size preset. Sets Tailwind h-{n} w-{n} on the SVG. Defaults to Md (h-4 w-4). |\n| Icon | Class | `string?` | `` |  |\n| Icon | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Icon />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/Icon/Icon.razor`\n"
}