skills.rest
legioncodeinc
legioncodeincOFFICIAL
Explore all skills by this author →
WebsiteGitHub

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

72|28|Updated May 23, 2026
Search Tags:#accessibility#react#icons#svg#tree-shaking#iconify#lucide
One-click install
npx skills add https://github.com/legioncodeinc/that-git-life --skill icon-system-stinger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-system-stinger
Source: https://github.com/legioncodeinc/that-git-life/tree/main/.claude/skills/icon-system-stinger
Command: npx skills add https://github.com/legioncodeinc/that-git-life --skill icon-system-stinger

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the challenge of selecting, delivering, and maintaining React icon systems that balance bundle size, accessibility, and developer experience.

Core Features & Use Cases

  • Icon Library Strategy: Guides selection between Lucide, Heroicons, Tabler, Phosphor, and Iconify based on project needs.
  • Performance Optimization: Helps choose between tree-shaken imports, SVG sprites, and dynamic icon loading patterns while avoiding bundle regressions.
  • Accessibility Auditing: Enforces decorative, semantic, and interactive icon requirements for WCAG-aligned React implementations.

Quick Start

Use the icon-system-stinger skill to audit my React application's icon usage and recommend the correct library, loading strategy, and accessibility fixes.

Frequently Asked Questions about icon-system-stinger

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

FAQPage Schema
What's the best way to optimize React icon bundle size without sacrificing accessibility?▼

Optimizing React icon bundle size requires applying tree-shaking strategies, evaluating SVG sprite trade-offs, and implementing dynamic icon mapping patterns while maintaining ARIA-based accessibility for WCAG compliance.

How do I choose between Lucide, Heroicons, and Iconify for my React application?▼

Choosing between Lucide, Heroicons, Tabler, Phosphor, and Iconify depends on evaluating your project's specific needs for icon variety, bundle size constraints, and developer experience within your React architecture.

When should I use SVG sprites versus tree-shaken imports for dynamic icon rendering?▼

SVG sprites and tree-shaken imports serve different dynamic icon rendering needs; analyzing SVG sprite trade-offs against tree-shaking strategies helps prevent bundle regressions while maintaining optimal loading performance.

How do I audit my React icon components for WCAG accessibility compliance?▼

Auditing React icon components for WCAG accessibility involves validating decorative, semantic, and interactive icon requirements using ARIA-based patterns to ensure proper screen reader support.

How do I implement dynamic icon mapping in React without causing bundle size regressions?▼

Implementing dynamic icon mapping in React without bundle regressions requires applying targeted tree-shaking strategies and analyzing SVG sprite trade-offs to ensure only necessary icons are delivered.

Related Skills

Explore More Software Engineering Skills→
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
junchenghuojunchenghuo
3

fe-a11y-performance-audit

Audit frontend web pages for WCAG compliance and Core Web Vitals.

Community
Intermediate
hamzaPixlhamzaPixl
2

svg-icon-creation

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

Community
Intermediate
jaguarliuujaguarliuu

icon-retrieval

Search an icon library by keyword and retrieve SVG strings with metadata.

Community
Intermediate