{
  "name": "ds-icon",
  "description": "Icon component with SDS icon set",
  "docUrl": "https://design.soracom.io/design-system/images/icons/",
  "category": "elements",
  "htmlElements": [
    "i"
  ],
  "isWebComponent": true,
  "modifiers": {
    "size": {
      "support": "custom",
      "values": [
        "--4xsmall",
        "--3xsmall",
        "--2xsmall",
        "--xsmall",
        "--small",
        "--medium",
        "--large",
        "--xlarge",
        "--2xlarge",
        "--3xlarge",
        "--4xlarge",
        "--huge",
        "--xhuge",
        "--2xhuge",
        "--3xhuge",
        "--4xhuge",
        "--xxtiny",
        "--xtiny",
        "--tiny",
        "--xxsmall",
        "--xxlarge",
        "--xxhuge",
        "--massive",
        "--xmassive",
        "--xxmassive"
      ]
    },
    "color": {
      "support": "all"
    },
    "visual-state": {
      "support": "all"
    },
    "shape": {
      "support": "subset",
      "values": [
        "--round",
        "--square",
        "--rounded"
      ]
    },
    "animation": {
      "support": "subset",
      "values": [
        "--spin",
        "--pulse",
        "--glow",
        "--blink"
      ]
    },
    "indent": {
      "support": "all"
    },
    "icon": {
      "support": "all"
    }
  },
  "registries": {
    "icons": {
      "path": "./ds-icons.json",
      "description": "SDS icon metadata, including names, aliases, categories, and source URLs."
    }
  },
  "examples": [
    {
      "name": "basic",
      "html": "<i class=\"ds-icon --icon-user\"></i>"
    },
    {
      "name": "star",
      "html": "<i class=\"ds-icon --icon-star\"></i>"
    },
    {
      "name": "settings",
      "html": "<i class=\"ds-icon --icon-settings\"></i>"
    },
    {
      "name": "search",
      "html": "<i class=\"ds-icon --icon-search\"></i>"
    },
    {
      "name": "close",
      "html": "<i class=\"ds-icon --icon-close\"></i>"
    },
    {
      "name": "check",
      "html": "<i class=\"ds-icon --icon-check\"></i>"
    },
    {
      "name": "warning",
      "html": "<i class=\"ds-icon --icon-warning\"></i>"
    },
    {
      "name": "info",
      "html": "<i class=\"ds-icon --icon-info\"></i>"
    },
    {
      "name": "edit",
      "html": "<i class=\"ds-icon --icon-edit\"></i>"
    },
    {
      "name": "trash",
      "html": "<i class=\"ds-icon --icon-trash\"></i>"
    },
    {
      "name": "download",
      "html": "<i class=\"ds-icon --icon-download\"></i>"
    },
    {
      "name": "upload",
      "html": "<i class=\"ds-icon --icon-upload\"></i>"
    },
    {
      "name": "_comment_sizes",
      "html": "Size examples"
    },
    {
      "name": "xsmall",
      "html": "<i class=\"ds-icon --icon-user --xsmall\"></i>"
    },
    {
      "name": "small",
      "html": "<i class=\"ds-icon --icon-user --small\"></i>"
    },
    {
      "name": "medium",
      "html": "<i class=\"ds-icon --icon-user --medium\"></i>"
    },
    {
      "name": "large",
      "html": "<i class=\"ds-icon --icon-user --large\"></i>"
    },
    {
      "name": "xlarge",
      "html": "<i class=\"ds-icon --icon-user --xlarge\"></i>"
    },
    {
      "name": "2xlarge",
      "html": "<i class=\"ds-icon --icon-user --2xlarge\"></i>"
    },
    {
      "name": "huge",
      "html": "<i class=\"ds-icon --icon-user --huge\"></i>"
    },
    {
      "name": "_comment_colors",
      "html": "Color examples"
    },
    {
      "name": "color-red",
      "html": "<i class=\"ds-icon --icon-heart --color-red\"></i>"
    },
    {
      "name": "color-blue",
      "html": "<i class=\"ds-icon --icon-settings --color-blue\"></i>"
    },
    {
      "name": "color-green",
      "html": "<i class=\"ds-icon --icon-check --color-green\"></i>"
    },
    {
      "name": "color-celeste",
      "html": "<i class=\"ds-icon --icon-star --color-celeste\"></i>"
    },
    {
      "name": "_comment_visual_states",
      "html": "Visual state examples"
    },
    {
      "name": "alert-state",
      "html": "<i class=\"ds-icon --icon-warning --alert\"></i>"
    },
    {
      "name": "success-state",
      "html": "<i class=\"ds-icon --icon-check --success\"></i>"
    },
    {
      "name": "info-state",
      "html": "<i class=\"ds-icon --icon-info --info\"></i>"
    },
    {
      "name": "_comment_shapes",
      "html": "Shape modifiers"
    },
    {
      "name": "round",
      "html": "<i class=\"ds-icon --icon-user --round --large\"></i>"
    },
    {
      "name": "square",
      "html": "<i class=\"ds-icon --icon-user --square --large\"></i>"
    },
    {
      "name": "rounded",
      "html": "<i class=\"ds-icon --icon-user --rounded --large\"></i>"
    },
    {
      "name": "_comment_animations",
      "html": "Animation examples"
    },
    {
      "name": "spin",
      "html": "<i class=\"ds-icon --icon-refresh --spin\"></i>"
    },
    {
      "name": "pulse",
      "html": "<i class=\"ds-icon --icon-heart --pulse\"></i>"
    },
    {
      "name": "glow",
      "html": "<i class=\"ds-icon --icon-star --glow\"></i>"
    },
    {
      "name": "blink",
      "html": "<i class=\"ds-icon --icon-bell --blink\"></i>"
    },
    {
      "name": "_comment_indents",
      "html": "Indent examples"
    },
    {
      "name": "indent-small",
      "html": "<i class=\"ds-icon --icon-user --xlarge --indent-small\"></i>"
    },
    {
      "name": "indent-medium",
      "html": "<i class=\"ds-icon --icon-user --xlarge --indent-medium\"></i>"
    },
    {
      "name": "_comment_complex",
      "html": "Complex combinations"
    },
    {
      "name": "round-large-colored",
      "html": "<i class=\"ds-icon --icon-star --round --large --color-celeste\"></i>"
    },
    {
      "name": "loading-spinner",
      "html": "<i class=\"ds-icon --icon-refresh --spin --medium\"></i>"
    },
    {
      "name": "alert-blink",
      "html": "<i class=\"ds-icon --icon-bell --alert --blink\"></i>"
    }
  ]
}