add-icon

Agent Skills › t4t5/rencal › add-icon

add-icon

GitHub

将用户提供的原始SVG代码转换为React图标组件，自动命名、清理冗余属性并适配Tailwind样式，最终生成至src/icons/目录。

.agents/skills/add-icon/SKILL.md t4t5/rencal

Trigger Scenarios

用户提供SVG标记并要求添加为图标需要将SVG转化为React组件

Install

npx skills add t4t5/rencal --skill add-icon -g -y

More Options

Non-standard path

npx skills add https://github.com/t4t5/rencal/tree/main/.agents/skills/add-icon -g -y

Use without installing

npx skills use t4t5/rencal@add-icon

指定 Agent (Claude Code)

npx skills add t4t5/rencal --skill add-icon -a claude-code -g -y

安装 repo 全部 skill

npx skills add t4t5/rencal --all -g -y

预览 repo 内 skill

npx skills add t4t5/rencal --list

SKILL.md

Frontmatter

{
    "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" />