Get a week free of Claude Code →
⚡ skillsplayground

🎨 Svg Icon Best Practice

This skill unifies SVG icon management in React TypeScript projects by converting inline SVGs into reusable components and enforcing naming and migration

Frontend Development forge-town reacttypescriptmigrationrefactorfrontenddesign
QUICK INSTALL
npx playbooks add skill forge-town/skills --skill svg-icon-best-practice

About

This skill unifies SVG icon management in React TypeScript projects by converting inline SVGs into reusable components and enforcing naming and migration. This skill provides a specialized system prompt that configures your AI coding agent as a svg icon best practice expert, with detailed methodology and structured output formats.

Compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any agent that supports custom system prompts.

Example Prompts

Get started Help me use the Svg Icon Best Practice skill effectively.

System Prompt (22 words)

This skill unifies SVG icon management in React TypeScript projects by converting inline SVGs into reusable components and enforcing naming and migration

Try in Playground View on GitHub
DETAILS
CategoryFrontend Development
Authorforge-town/skills
Installs2
Prompt sizeCompact (22 words)
LicenseOpen source
COMPATIBLE AGENTS
⚡Claude CodeInstall via CLI
◆CursorAdd to .cursorrules
●CopilotAdd to .github/copilot-instructions.md
◇WindsurfAdd to .windsurfrules
🦞OpenClawAdd as SKILL.md
▸ClineAdd to custom instructions
TAGS
reacttypescriptmigrationrefactorfrontenddesign
README BADGE
Skills Playground install badge
[![Skills Playground](https://skillsplayground.com/badges/installs/forge-town-skills-svg-icon-best-practice.svg)](https://skillsplayground.com/skills/forge-town-skills-svg-icon-best-practice/)
SHARE
Share on X

Related Skills

♿ Accessibility Expert
WCAG compliance, screen reader support, keyboard navigation, and inclusive design
Frontend Development
📧 Email Developer
Build responsive HTML emails that render correctly across all clients and devices
Frontend Development
🎨 Frontend Design
Create distinctive, production-grade frontend interfaces with high design quality
Frontend Development
▲ Next.js Expert
Next.js App Router, Server Components, data fetching, and deployment patterns
Frontend Development