{
  "element": "nve-icon",
  "entrypoint": "@nvidia-elements/core/icon/icon.examples.json",
  "items": [
    {
      "id": "icon",
      "name": "Default",
      "template": "<nve-icon name=\"person\"></nve-icon>\n",
      "summary": "Basic icon component with standard appearance and usage for visual communication and interface navigation.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-statuses",
      "name": "Statuses",
      "template": "<nve-icon name=\"person\"></nve-icon>\n<nve-icon name=\"person\" status=\"accent\"></nve-icon>\n<nve-icon name=\"person\" status=\"success\"></nve-icon>\n<nve-icon name=\"person\" status=\"warning\"></nve-icon>\n<nve-icon name=\"person\" status=\"danger\"></nve-icon>\n",
      "summary": "Semantic color variations to communicate different states, priorities, and contextual meanings in user interfaces.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-size",
      "name": "Size",
      "template": "<nve-icon name=\"person\" size=\"sm\"></nve-icon>\n<nve-icon name=\"person\"></nve-icon>\n<nve-icon name=\"person\" size=\"lg\"></nve-icon>\n",
      "summary": "Icon size variants to accommodate layout densities, touch targets, and visual hierarchy requirements.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-direction",
      "name": "Direction",
      "template": "<nve-icon name=\"arrow-stop\" direction=\"left\"></nve-icon>\n<nve-icon name=\"arrow-stop\" direction=\"right\"></nve-icon>\n<nve-icon name=\"arrow\" direction=\"up\"></nve-icon>\n<nve-icon name=\"arrow\" direction=\"down\"></nve-icon>\n<nve-icon name=\"arrow\" direction=\"left\"></nve-icon>\n<nve-icon name=\"arrow\" direction=\"right\"></nve-icon>\n<nve-icon name=\"caret\" direction=\"up\"></nve-icon>\n<nve-icon name=\"caret\" direction=\"down\"></nve-icon>\n<nve-icon name=\"caret\" direction=\"left\"></nve-icon>\n<nve-icon name=\"caret\" direction=\"right\"></nve-icon>\n<nve-icon name=\"chevron\" direction=\"up\"></nve-icon>\n<nve-icon name=\"chevron\" direction=\"down\"></nve-icon>\n<nve-icon name=\"chevron\" direction=\"left\"></nve-icon>\n<nve-icon name=\"chevron\" direction=\"right\"></nve-icon>\n",
      "summary": "Directional icons for navigation, movement, and spatial relationships, providing clear visual cues for user actions.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "icon-themes",
      "name": "Themes",
      "template": "<div nve-theme=\"root light\">\n  <nve-icon name=\"person\"></nve-icon>\n  <nve-icon name=\"person\" status=\"accent\"></nve-icon>\n  <nve-icon name=\"person\" status=\"success\"></nve-icon>\n  <nve-icon name=\"person\" status=\"warning\"></nve-icon>\n  <nve-icon name=\"person\" status=\"danger\"></nve-icon>\n</div>\n<div nve-theme=\"root dark\">\n  <nve-icon name=\"person\"></nve-icon>\n  <nve-icon name=\"person\" status=\"accent\"></nve-icon>\n  <nve-icon name=\"person\" status=\"success\"></nve-icon>\n  <nve-icon name=\"person\" status=\"warning\"></nve-icon>\n  <nve-icon name=\"person\" status=\"danger\"></nve-icon>\n</div>\n",
      "summary": "Icon appearance across light and dark themes, ensuring proper contrast and visibility in different visual environments.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-registration",
      "name": "Registration",
      "template": "<nve-icon name=\"smile\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n<script type=\"module\">\n  customElements.get(\"nve-icon\").add({\n    smile: {\n      svg: () =>\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\" stroke=\"currentColor\" stroke-width=\"3\"/><circle cx=\"18\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><circle cx=\"30\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><path d=\"M17 29c1.5 2.5 4.2 4 7 4s5.5-1.5 7-4\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>',\n    },\n  });\n</script>\n",
      "summary": "Register SVG paths and make them accessible to the `<nve-icon>` element. Define icons via a string or async function returning the resulting string.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-alias",
      "name": "Alias",
      "template": "<script type=\"module\">\n  await customElements.whenDefined(\"nve-icon\");\n  customElements.get(\"nve-icon\").alias({\n    attached: \"paper-clip\",\n  });\n</script>\n<nve-icon name=\"paper-clip\"></nve-icon>\n<nve-icon name=\"attached\"></nve-icon>\n",
      "summary": "Alias icons to a different name. This supports context-specific names or migrations between icon sets.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "icon-source",
      "name": "Source",
      "template": "<nve-icon name=\"/static/images/test-image-1.svg\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n",
      "summary": "Provide direct SVG paths for rendering.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}