skills.rest
0r0loo
0r0looCOMMUNITY
Explore all skills by this author →
GitHub

svg-icon

Generate SVG icons as React components with enforced design system standards.

Updated Feb 10, 2026
Search Tags:#frontend#react#design system#component#icons#svg
One-click install
npx skills add https://github.com/0r0loo/my-claude-code-toolkit --skill svg-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-icon
Source: https://github.com/0r0loo/my-claude-code-toolkit/tree/main/.claude/skills/SVGIcon
Command: npx skills add https://github.com/0r0loo/my-claude-code-toolkit --skill svg-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill standardizes the creation of SVG icons for design systems, ensuring consistency in appearance and providing a React component wrapper for easy integration.

Core Features & Use Cases

  • Standardized SVG Generation: Enforces rules for viewBox, stroke-width, fill, and stroke for consistent icons.
  • React Component Pattern: Offers patterns for creating individual icon components or using a factory for multiple icons.
  • Use Case: When building a new UI component library, use this Skill to generate all necessary icons (like buttons, navigation elements, status indicators) following the established design guidelines.

Quick Start

Use the svg-icon skill to create a React component for a 'close' icon with a path 'M18 6 6 18'.

Frequently Asked Questions about svg-icon

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create consistent SVG icons for a React design system?▼

To create consistent SVG icons for a React design system, this Skill enforces rules for viewBox, stroke-width, fill, and stroke while generating standardized React component patterns for immediate integration.

What is the best way to standardize SVG stroke and fill properties across a component library?▼

The best way to standardize SVG stroke and fill properties is by applying this Skill to enforce specific design system rules for viewBox, stroke-width, fill, and path definitions during React component generation.

Can I generate a React component wrapper for a specific SVG path?▼

Yes, you can generate a React component wrapper for a specific SVG path by providing the path data to this Skill, which outputs an accessible component following your design system guidelines.

Does this approach support creating multiple icons using a factory pattern?▼

Yes, this approach supports creating multiple icons using a factory pattern, offering specific React component creation patterns for generating either individual icons or a batch of icon components.

How do I add accessibility to SVG icons in my frontend application?▼

To add accessibility to SVG icons in your frontend application, this Skill provides built-in patterns for component creation that enforce accessibility standards alongside design system rules.

Related Skills

Explore More Design & Creative Skills→
endlessblinkendlessblink

svg-icon-craft

Generate cyberpunk SVG icons for Vue components with standardized templates.

Community
Intermediate
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate
hulusi-tunchulusi-tunc
3

naming-convention

Establish naming conventions for design elements, components, and tokens.

Community
Intermediate
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced