{
  "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": [
      "--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": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "shape": [
      "--round",
      "--square",
      "--rounded"
    ],
    "animation": [
      "--spin",
      "--pulse",
      "--glow",
      "--blink"
    ],
    "indent": "all",
    "icon": "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>"
    }
  ]
}