skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

component-icon

Generate an accessible React Icon component with inline SVG paths and ARIA behavior.

Updated Apr 21, 2026
Search Tags:#typescript#accessibility#react#wcag#component scaffolding#aria-label#svg icons
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-icon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-icon
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/component-icon
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-icon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Creates an accessible Icon component on demand, so developers can quickly add consistent, WCAG-aligned inline SVG icons without manually wiring aria attributes, sizing, or boilerplate.

Core Features & Use Cases

  • Accessible SVG output: Renders an inline <svg> for a chosen built-in icon name, supporting decorative usage via aria-hidden and standalone/informative usage via aria-label (with appropriate role).
  • Simple sizing and color control: Uses a size prop (default 16) and a color prop (default currentColor) so icons match surrounding typography and theme needs.
  • Project-scaffolding workflow: Writes the component to the target project (via the skill’s generation contract), then runs an integration verification pass to help confirm it works in context.

Quick Start

Ask the agent to create an accessible info icon component in your project named Icon with size 20 and decorative aria-hidden behavior by running /kit-add icon and specifying the icon name "info", size 20, and that it should be decorative.

Frequently Asked Questions about component-icon

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

FAQPage Schema
How do I generate an accessible SVG icon component in React?▼

Make an SVG icon accessible in React by applying aria-hidden for decorative icons or aria-label with an appropriate role for standalone informative icons. The generated TSX component manages these ARIA behaviors automatically based on your props.

What's the best way to scaffold WCAG-compliant icon components for a TypeScript app?▼

Control SVG icon sizing and color in a generated component using a size prop defaulting to 16 and a color prop defaulting to currentColor. This ensures inline SVG icons match surrounding typography and theme needs without manual boilerplate.

Can I use generated inline SVG icons with aria-label for standalone informative controls?▼

Yes, generated inline SVG icons support decorative controls by applying the aria-hidden attribute automatically. This prevents screen readers from announcing decorative icons in labeled controls, ensuring proper accessibility compliance.

Do I need to manually wire ARIA attributes when adding inline SVG paths to my React app?▼

No, you do not need to manually wire ARIA attributes when adding inline SVG paths to your React app. The generation process writes the component with the required ARIA behavior and runs an integration verification pass to confirm accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
shawn-sandyshawn-sandy

component-icon-button

Generate accessible React IconButton scaffolds with SCSS and XOR aria-label constraints.

Community
Intermediate
shawn-sandyshawn-sandy

component-nav

Generate accessible React navigation components with ARIA attributes and SCSS styling.

Community
Intermediate
ayushrathore1ayushrathore1

shadcn-ui Component Patterns

Implement shadcn/ui components with Radix UI and Tailwind CSS in Next.js.

Community
Intermediate
hamzaPixlhamzaPixl
2

svg-icon-creation

Create optimized SVG icons as TypeScript React components with ARIA attributes.

Community
Intermediate