Skills
.Work. You
Rest

svg-icon

Community

Create consistent SVG icons for design systems.

Design & Creative#frontend#react#design system#component#icons#svg
Author0r0loo
Version1.0.0
Installs0

System Documentation

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'.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: svg-icon
Download link: https://github.com/0r0loo/my-claude-code-toolkit/archive/main.zip#svg-icon

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.