add-icon - SKILL.md Agent Skill

name: add-icon description: Turn raw SVG markup into a React icon component in src/icons/. Use when the user provides SVG markup and wants it added as an icon.

You are turning raw SVG markup the user provides into a React icon component in src/icons/.

Workflow

Get the SVG: The user will give you raw SVG markup (often copy-pasted from Streamline, Figma, etc.).
Pick a filename: Use a short kebab-case name describing the icon (e.g. settings.tsx, arrow-right.tsx). Infer obvious icon names without asking. For common brand logos, use the brand name (e.g. GitHub → github.tsx). Ask the user only if the name is truly ambiguous.
Pick a component name: PascalCase + Icon suffix (e.g. SettingsIcon, ArrowRightIcon, GithubIcon).
Transform the SVG:
- Wrap it in export const <Name>Icon = ({ className }: { className?: string }) => (...)
- On the <svg> tag: keep xmlns, fill, and viewBox. Add className={className}. Remove hardcoded width and height — size is controlled by Tailwind (size-4, size-6, etc.).
- Replace every hardcoded stroke color (e.g. stroke="#000000") with stroke="currentColor". Same for fill if it's a color — but leave fill="none" alone.
- Strip noise: id attributes, <desc> tags, <title> tags, and any other vendor metadata.
- Keep strokeWidth, strokeLinecap, strokeLinejoin, d, and other geometry-defining attributes.
Write the file to src/icons/<name>.tsx immediately. Use bash with a quoted heredoc instead of the write tool to avoid slow line-by-line UI rendering:
```
cat > src/icons/<name>.tsx <<'EOF'
...
EOF
```

Speed rules

Do not inspect existing icon files unless necessary.
Infer obvious icon names without asking.
For common brand logos, use the brand name.
Immediately write src/icons/<name>.tsx after transforming.
Prefer bash with a quoted heredoc for file creation; do not use the write tool unless bash is unavailable.
Do not run checks unless the user asks.

Example

Input:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Foo" height={24} width={24}>
  <desc>Some vendor blurb</desc>
  <g id="group"><path id="p1" stroke="#000000" d="M6 0v14" strokeWidth={2} /></g>
</svg>

Output (src/icons/foo.tsx):

export const FooIcon = ({ className }: { className?: string }) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={className}>
    <g>
      <path stroke="currentColor" d="M6 0v14" strokeWidth={2} />
    </g>
  </svg>
)

Usage: <FooIcon className="size-4 text-primary" />