{
  "schemaVersion": "1.0",
  "item": {
    "slug": "icons",
    "name": "Icons",
    "source": "tencent",
    "type": "skill",
    "category": "内容创作",
    "sourceUrl": "https://clawhub.ai/ivangdavila/icons",
    "canonicalUrl": "https://clawhub.ai/ivangdavila/icons",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/icons",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=icons",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/icons"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/icons",
    "agentPageUrl": "https://openagent3.xyz/skills/icons/agent",
    "manifestUrl": "https://openagent3.xyz/skills/icons/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/icons/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "SVG vs Icon Fonts",
        "body": "SVG is the modern standard:\n\nBetter accessibility (native ARIA support)\nNo flash of invisible/wrong icon (FOIT)\nMulticolor support\nSmaller bundles with tree-shaking\n\nOnly consider icon fonts for legacy IE11 support."
      },
      {
        "title": "Accessibility Patterns",
        "body": "Decorative icons (next to visible text):\n\n<button>\n  <svg aria-hidden=\"true\" focusable=\"false\">...</svg>\n  Save\n</button>\n\nInformative icons (standalone, no label):\n\n<button aria-label=\"Save document\">\n  <svg aria-hidden=\"true\" focusable=\"false\">...</svg>\n</button>\n\n<!-- Or with visually hidden text -->\n<button>\n  <svg aria-hidden=\"true\">...</svg>\n  <span class=\"sr-only\">Save document</span>\n</button>\n\nSVG with accessible name:\n\n<svg role=\"img\" aria-labelledby=\"icon-title\">\n  <title id=\"icon-title\">Warning: system error</title>\n  <!-- paths -->\n</svg>\n\nKey rules:\n\naria-hidden=\"true\" on SVGs that duplicate visible text\nfocusable=\"false\" prevents unwanted tab stops in IE/Edge\n<title> must be first child inside <svg> for screen reader support\nIDs must be unique if multiple SVGs are inline"
      },
      {
        "title": "Color Inheritance",
        "body": "<svg fill=\"currentColor\">\n  <path d=\"...\"/>\n</svg>\n\ncurrentColor inherits from CSS color property. The icon changes color with hover states automatically:\n\n.button { color: blue; }\n.button:hover { color: red; } /* icon turns red too */\n\nRemove hardcoded fill=\"#000\" from SVGs before using currentColor.\n\nFor stroke-based icons, use stroke=\"currentColor\" instead."
      },
      {
        "title": "Sizing",
        "body": "Standard grid sizes: 16, 20, 24, 32px\n\nMatch stroke weight to size:\n\nSizeStrokeUse case16px1pxDense layouts, small text20px1.25pxDefault UI24px1.5pxButtons, primary actions32px2pxHeaders, navigation\n\nTouch targets need 44x44px minimum—icon can be smaller if tappable area is larger via padding.\n\n.icon-button {\n  width: 24px;\n  height: 24px;\n  padding: 10px; /* Creates 44x44 touch target */\n}"
      },
      {
        "title": "Scaling with Text",
        "body": ".icon {\n  width: 1em;\n  height: 1em;\n}\n\nIcon scales with surrounding text size automatically."
      },
      {
        "title": "Symbol Sprites",
        "body": "For many repeated icons, reduce DOM nodes with sprites:\n\n<!-- Define once, hidden -->\n<svg style=\"display:none\">\n  <symbol id=\"icon-search\" viewBox=\"0 0 24 24\">\n    <path d=\"...\"/>\n  </symbol>\n  <symbol id=\"icon-menu\" viewBox=\"0 0 24 24\">\n    <path d=\"...\"/>\n  </symbol>\n</svg>\n\n<!-- Use anywhere -->\n<svg aria-hidden=\"true\"><use href=\"#icon-search\"/></svg>\n\nExternal sprites (<use href=\"/icons.svg#search\"/>) don't work in older Safari without polyfill."
      },
      {
        "title": "Performance",
        "body": "Benchmark (1000 icons):\n\n<img> with data URI: 67ms (fastest)\nInline SVG optimized: 75ms\nSymbol sprite: 99ms\n<img> external: 76ms\n\nRecommendations:\n\nTree-shake icon libraries (Lucide, Heroicons support this)\nDon't import entire Font Awesome (1MB+)—use subset or switch to SVG\nInline critical icons, lazy-load sprite for non-critical"
      },
      {
        "title": "Consistency",
        "body": "Stick to one icon set—mixing styles looks unprofessional\nMatch icon stroke weight to your font weight (regular text = 1.5px stroke)\nPick one style per context: outlined for inactive, filled for active\nOptical alignment differs from mathematical—circles reach edges, squares don't\nName icons by appearance, not meaning: stopwatch not speed"
      },
      {
        "title": "Common Mistakes",
        "body": "Missing aria-hidden on decorative icons—screen readers announce gibberish\nMixing rounded and sharp icon styles in same interface\nGiant icon libraries for 10 icons—massive bundle bloat\nIcon-only buttons without accessible name—impossible to use with screen readers\nHardcoded colors preventing theme switching\nStroke width not scaling with icon size—16px icon with 2px stroke looks heavy"
      }
    ],
    "body": "SVG vs Icon Fonts\n\nSVG is the modern standard:\n\nBetter accessibility (native ARIA support)\nNo flash of invisible/wrong icon (FOIT)\nMulticolor support\nSmaller bundles with tree-shaking\n\nOnly consider icon fonts for legacy IE11 support.\n\nAccessibility Patterns\n\nDecorative icons (next to visible text):\n\n<button>\n  <svg aria-hidden=\"true\" focusable=\"false\">...</svg>\n  Save\n</button>\n\n\nInformative icons (standalone, no label):\n\n<button aria-label=\"Save document\">\n  <svg aria-hidden=\"true\" focusable=\"false\">...</svg>\n</button>\n\n<!-- Or with visually hidden text -->\n<button>\n  <svg aria-hidden=\"true\">...</svg>\n  <span class=\"sr-only\">Save document</span>\n</button>\n\n\nSVG with accessible name:\n\n<svg role=\"img\" aria-labelledby=\"icon-title\">\n  <title id=\"icon-title\">Warning: system error</title>\n  <!-- paths -->\n</svg>\n\n\nKey rules:\n\naria-hidden=\"true\" on SVGs that duplicate visible text\nfocusable=\"false\" prevents unwanted tab stops in IE/Edge\n<title> must be first child inside <svg> for screen reader support\nIDs must be unique if multiple SVGs are inline\nColor Inheritance\n<svg fill=\"currentColor\">\n  <path d=\"...\"/>\n</svg>\n\n\ncurrentColor inherits from CSS color property. The icon changes color with hover states automatically:\n\n.button { color: blue; }\n.button:hover { color: red; } /* icon turns red too */\n\n\nRemove hardcoded fill=\"#000\" from SVGs before using currentColor.\n\nFor stroke-based icons, use stroke=\"currentColor\" instead.\n\nSizing\n\nStandard grid sizes: 16, 20, 24, 32px\n\nMatch stroke weight to size:\n\nSize\tStroke\tUse case\n16px\t1px\tDense layouts, small text\n20px\t1.25px\tDefault UI\n24px\t1.5px\tButtons, primary actions\n32px\t2px\tHeaders, navigation\n\nTouch targets need 44x44px minimum—icon can be smaller if tappable area is larger via padding.\n\n.icon-button {\n  width: 24px;\n  height: 24px;\n  padding: 10px; /* Creates 44x44 touch target */\n}\n\nScaling with Text\n.icon {\n  width: 1em;\n  height: 1em;\n}\n\n\nIcon scales with surrounding text size automatically.\n\nSymbol Sprites\n\nFor many repeated icons, reduce DOM nodes with sprites:\n\n<!-- Define once, hidden -->\n<svg style=\"display:none\">\n  <symbol id=\"icon-search\" viewBox=\"0 0 24 24\">\n    <path d=\"...\"/>\n  </symbol>\n  <symbol id=\"icon-menu\" viewBox=\"0 0 24 24\">\n    <path d=\"...\"/>\n  </symbol>\n</svg>\n\n<!-- Use anywhere -->\n<svg aria-hidden=\"true\"><use href=\"#icon-search\"/></svg>\n\n\nExternal sprites (<use href=\"/icons.svg#search\"/>) don't work in older Safari without polyfill.\n\nPerformance\n\nBenchmark (1000 icons):\n\n<img> with data URI: 67ms (fastest)\nInline SVG optimized: 75ms\nSymbol sprite: 99ms\n<img> external: 76ms\n\nRecommendations:\n\nTree-shake icon libraries (Lucide, Heroicons support this)\nDon't import entire Font Awesome (1MB+)—use subset or switch to SVG\nInline critical icons, lazy-load sprite for non-critical\nConsistency\nStick to one icon set—mixing styles looks unprofessional\nMatch icon stroke weight to your font weight (regular text = 1.5px stroke)\nPick one style per context: outlined for inactive, filled for active\nOptical alignment differs from mathematical—circles reach edges, squares don't\nName icons by appearance, not meaning: stopwatch not speed\nCommon Mistakes\nMissing aria-hidden on decorative icons—screen readers announce gibberish\nMixing rounded and sharp icon styles in same interface\nGiant icon libraries for 10 icons—massive bundle bloat\nIcon-only buttons without accessible name—impossible to use with screen readers\nHardcoded colors preventing theme switching\nStroke width not scaling with icon size—16px icon with 2px stroke looks heavy"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ivangdavila/icons",
    "publisherUrl": "https://clawhub.ai/ivangdavila/icons",
    "owner": "ivangdavila",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/icons",
    "downloadUrl": "https://openagent3.xyz/downloads/icons",
    "agentUrl": "https://openagent3.xyz/skills/icons/agent",
    "manifestUrl": "https://openagent3.xyz/skills/icons/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/icons/agent.md"
  }
}