Skills
.Work. You
Rest

svg-icon-creation

Community

Convert concepts to optimized React SVG icons

Software Engineering#accessibility#react#optimization#component#svg#icon
AuthorhamzaPixl
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill streamlines the creation of custom SVG icons by guiding designers from concept through optimization to ready‑to‑use React components, eliminating manual redesign and accessibility oversights.

Core Features & Use Cases

  • Discovery & Design: Define the icon concept and align with project style.
  • Optimization: Minify SVG, enforce currentColor, and meet size grids.
  • React Component Wrapping: Generate a TypeScript component with ARIA attributes for accessibility. Typical use case: a UI developer needs a new “search” icon that matches the app’s design system and can be dropped directly into the codebase.

Quick Start

Generate an optimized React SVG component for the icon concept you provide.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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-creation
Download link: https://github.com/hamzaPixl/pixl-ai/archive/main.zip#svg-icon-creation

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 471,000+ vetted skills library on demand.