Skip to main content Startseite Ersteller ajbcoding claude-skill-eval moai-icons-vector
moai-icons-vector Vector icon libraries ecosystem guide covering 10+ major libraries with 200K+ icons, including React Icons (35K+), Lucide (1000+), Tabler Icons (5900+), Iconify (200K+), Heroicons, Phosphor, and Radix Icons with implementation patterns, decision trees, and best practices.
Zur Installation springen Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vectorDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository
Enterprise-grade security expertise with production-ready patterns for OWASP Top 10 2021, zero-trust architecture, threat modeling (STRIDE, PASTA), secure SDLC, DevSecOps automation, cloud security, cryptography, identity & access management, and compliance frameworks (SOC 2, ISO 27001, GDPR, CCPA).
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name moai-icons-vector version 4.0.0 status stable tier domain description Vector icon libraries ecosystem guide covering 10+ major libraries with 200K+ icons, including React Icons (35K+), Lucide (1000+), Tabler Icons (5900+), Iconify (200K+), Heroicons, Phosphor, and Radix Icons with implementation patterns, decision trees, and best practices. allowed-tools Read, Bash, WebSearch, WebFetch, mcp__context7__resolve-library-id, mcp__context7__get-library-docs primary-agent frontend-expert secondary-agents ["ui-ux-expert","qa-validator","alfred"] keywords ["icons","vector icons","lucide","react icons","tabler icons","phosphor icons","heroicons","radix icons","iconify","svg icons","icon library","icon design system","accessibility"] tags ["domain-expert","enterprise"] orchestration null can_resume true typical_chain_position middle depends_on []
moai-icons-vector
Vector Icon Libraries: Enterprise Guide (10+ Libraries, 200K+ Icons)
Primary Agent : frontend-expert
Secondary Agent : ui-ux-expert
Version : 4.0.0 (Lucide v0.4+, React Icons 35K+, Tabler v2.0+, Phosphor v1.4+)
Keywords : icons, vector icons, lucide, react icons, iconify, svg icons, accessibility
Level 1: Quick Reference
Library Selection Guide
Ecosystem Leaders (1000+ icons) :
Lucide (1000+): General UI, modern design, ~30KBReact Icons (35K+): Multi-library support, modular bundlesTabler Icons (5900+): Dashboard optimized, ~22KBIonicons (1300+): Mobile + web compatibility
Specialist Libraries (300-800 icons) :
Heroicons (300+): Official Tailwind CSS iconsPhosphor (800+): 6 weights + duotone variationsMaterial Design (900+): Google design systemBootstrap Icons (2000+): Bootstrap ecosystem
Compact & Specialized :
Radix Icons (150+): Precise 15x15px, ~5KBSimple Icons (3300+): Brand logos onlyIconify (200K+): Universal framework, CDN-based
Quick Decision Matrix
Scenario Best Choice Why Want maximum icons Iconify 200K+ icons from 150+ sets Dashboard application Tabler Icons 5900 optimized icons, 24px Tailwind CSS project Heroicons Official integration Flexible styling needed Phosphor 6 weights + duotone Minimal bundle size Radix Icons 5KB, precise 15x15px Brand logos Simple Icons 3300+ company logos General purpose UI Lucide 1000+ modern, well-designed
Bundle Size Comparison
Radix Icons: ~5KB (150 icons)
Heroicons: ~10KB (300 icons)
Tabler Icons: ~22KB (5900 icons)
Ionicons: ~25KB (1300 icons)
Phosphor: ~25KB (800 icons with weights)
Lucide: ~30KB (1000 icons)
Simple Icons: ~50KB (3300+ brand icons)
React Icons: Modular (varies by library)
Level 2: Practical Implementation
Core Library Patterns
Lucide React - General Purpose (1000+ icons) import { Heart , Search , Settings , ChevronRight } from 'lucide-react'
export function LucideExample (return (
<div className ="space-y-4" >
{/* Basic usage (24px default) */}
<div className ="flex items-center gap-2" >
<Search />
<span > Search</span >
</div >
{/* Custom styling */}
<Heart size ={32} color ="#ff0000" fill ="#ff0000" />
{/* Tailwind integration */}
<Settings className ="w-6 h-6 text-gray-500 hover:text-gray-900" />
{/* Icon button */}
<button className ="p-2 rounded-lg hover:bg-gray-100" >
<ChevronRight size ={20} />
</button >
</div >
React Icons - Multi-Library (35K+ icons) import { FaHome } from "react-icons/fa"
import { MdHome } from "react-icons/md"
import { BsHouse } from "react-icons/bs"
import { FiHome } from "react-icons/fi"
import { SiReact } from "react-icons/si"
export function MultiLibraryExample (return (
<div className ="flex gap-4" >
<FaHome size ={32} className ="text-blue-600" />
<MdHome size ={32} className ="text-green-600" />
<BsHouse size ={32} className ="text-purple-600" />
<FiHome size ={32} className ="text-orange-600" />
<SiReact size ={32} className ="text-cyan-500" />
</div >
Phosphor Icons - Weight Variations (800+ icons) import { Heart , Star } from "@phosphor-icons/react"
export function PhosphorExample (const [rating, setRating] = React .useState (3 )
return (
<div className ="space-y-4" >
{/* Weight variations */}
<div className ="flex gap-2" >
<Heart weight ="thin" />
<Heart weight ="light" />
<Heart weight ="regular" />
<Heart weight ="bold" />
<Heart weight ="fill" />
</div >
{/* Interactive rating */}
<div className ="flex gap-1" >
{[1, 2, 3, 4, 5].map((star) => (
<button key ={star} >
<Star
weight ={star <= rating ? "fill " : "regular "}
size ={24}
color ={star <= rating ? "#fbbf24 " : "#d1d5db "}
/>
</button >
))}
</div >
</div >
Iconify - Universal Framework (200K+ icons) import { Icon } from "@iconify/react"
export function IconifyExample (return (
<div className ="space-y-4" >
{/* String-based (CDN loaded) */}
<Icon icon ="fa:home" width ="32" height ="32" />
<Icon icon ="mdi:account" width ="32" height ="32" />
<Icon icon ="bi:house" width ="32" height ="32" />
{/* Custom styling */}
<Icon
icon ="heroicons:heart"
width ="48"
height ="48"
style ={{ color: "#ef4444 " }}
/>
</div >
Type-Safe Icon Button import { FC , SVGProps } from 'react'
type IconType = FC <SVGProps <SVGSVGElement >>
interface IconButtonProps {
icon : IconType
label : string
variant ?: 'primary' | 'secondary' | 'ghost'
size ?: 'sm' | 'md' | 'lg'
onClick ?: () => void
}
const sizeMap = {
sm : 'w-4 h-4' ,
md : 'w-5 h-5' ,
lg : 'w-6 h-6' ,
}
const variantMap = {
primary : 'bg-blue-500 text-white hover:bg-blue-600' ,
secondary : 'bg-gray-200 text-gray-900 hover:bg-gray-300' ,
ghost : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100' ,
}
export function IconButton ({
icon: Icon,
label,
variant = 'ghost' ,
size = 'md' ,
onClick,
}: IconButtonProps ) {
return (
<button
onClick ={onClick}
aria-label ={label}
title ={label}
className ={ `
p-2 rounded-lg transition-all
${variantMap [variant ]}
`}
>
<Icon className ={sizeMap[size]} />
</button >
Level 3: Advanced Integration
Custom Icon Component import { forwardRef, SVGProps } from 'react'
interface CustomIconProps extends SVGProps <SVGSVGElement > {
isActive ?: boolean
tooltip ?: string
}
export const CustomIcon = forwardRef<SVGSVGElement , CustomIconProps >(
({ isActive, tooltip, className = '' , ...props }, ref ) => (
<svg
ref ={ref}
viewBox ="0 0 24 24"
width ="24"
height ="24"
className ={ `
${isActive ? 'text-blue-500 ' : 'text-gray-400 '}
${tooltip ? 'cursor-help ' : ''}
${className }
transition-colors duration-200
`}
title ={tooltip}
{...props }
>
<path d ="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
</svg >
Icon Theme System import { Heart , Settings } from 'lucide-react'
type IconTheme = 'light' | 'dark' | 'accent'
interface IconThemeConfig {
color : string
strokeWidth : number
opacity : number
}
const themeConfig : Record <IconTheme , IconThemeConfig > = {
light : { color : '#e5e7eb' , strokeWidth : 2 , opacity : 1 },
dark : { color : '#1f2937' , strokeWidth : 2 , opacity : 1 },
accent : { color : '#0ea5e9' , strokeWidth : 2.5 , opacity : 1 },
}
export function ThemedIcon ({ theme, size = 24 }: { theme: IconTheme; size?: number } ) {
const config = themeConfig[theme]
return (
<div className ="flex gap-4" >
<Heart size ={size} color ={config.color} strokeWidth ={config.strokeWidth} />
<Settings size ={size} color ={config.color} strokeWidth ={config.strokeWidth} />
</div >
Icon Animation import { Heart } from 'lucide-react'
import { useState } from 'react'
export function AnimatedIcon (const [isActive, setIsActive] = useState (false )
return (
<button onClick ={() => setIsActive(!isActive)} className="p-4">
<Heart
size ={32}
className ={ `
text-red-500 transition-all duration-300
${isActive ? 'scale-125 animate-pulse ' : 'scale-100 '}
`}
fill ={isActive ? '#ff0000 ' : 'none '}
/>
</button >
Performance & Best Practices
Performance Optimization
import { Heart , Star } from 'lucide-react'
import * as Icons from 'lucide-react'
const Icon = Icons [iconName]
const LazyIcon = React .lazy (() => import ('lucide-react' ).then (module =>default : module [iconName]
})))
const MemoHeart = React .memo (Heart )
Bundle Optimization Strategies
Choose right library size : Use Radix Icons for minimal bundlesImport specific icons : Avoid import * patternsDynamic loading : Load icons on-demand for large setsIcon subsets : Create custom bundles per featureTree-shaking : Use ES modules and bundler optimization
Accessibility Essentials
✅ Use aria-label for icon-only buttons
✅ Ensure 4.5:1 color contrast ratio
✅ Support high contrast mode with currentColor
✅ Don't rely on color alone for meaning
✅ Use semantic HTML structure
✅ Test with screen readers
Library Comparison Summary Library Icons Bundle Size Best For Lucide 1000+ ~30KB General purpose UI Heroicons 300+ ~10KB Tailwind CSS projects Phosphor 800+ ~25KB Weight flexibility needed Tabler 5900+ ~22KB Dashboard applications Radix 150+ ~5KB Minimal bundle size React Icons 35K+ Modular Multi-library support Iconify 200K+ CDN Maximum icon variety
Quick Installation Commands
npm install lucide-react
npm install @heroicons/react
npm install @phosphor-icons/react
npm install @tabler/icons-react
npm install @radix-ui/react-icons
npm install react-icons
npm install @iconify/react
npm install simple-icons
Version : 4.0.0 Enterprise
Last Updated : 2025-11-13
Status : Production Ready
Enterprise Grade : ✅ Full Enterprise Support
