Skip to main content Início Criadores 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vectorO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... 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).
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
3 arquivos 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
