菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-icons-vector命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Enterprise database architecture specialist with PostgreSQL 17, MySQL 8.4 LTS, MongoDB 8.0, Redis 7.4 expertise. Master connection pooling, query optimization, caching strategies, and database DevOps automation. Build scalable, resilient database systems with comprehensive monitoring and disaster recovery.
Enterprise Frontend Development with AI-powered modern architecture, Context7 integration, and intelligent component orchestration for scalable user interfaces
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).
基于 SOC 职业分类
正在显示 SKILL.md
| 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 | [] |
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
Ecosystem Leaders (1000+ icons):
Specialist Libraries (300-800 icons):
Compact & Specialized:
| 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 |
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)
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>
)
}
import { FaHome } from "react-icons/fa" // Font Awesome
import { MdHome } from "react-icons/md" // Material Design
import { BsHouse } from "react-icons/bs" // Bootstrap
import { FiHome } from "react-icons/fi" // Feather
import { SiReact } from "react-icons/si" // Brand logos
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>
)
}
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>
)
}
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>
)
}
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>
)
}
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>
)
)
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>
)
}
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>
)
}
// ✅ Good: Tree-shake specific icons
import { Heart, Star } from 'lucide-react'
// ❌ Bad: Import entire library
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]
// ✅ Good: Dynamic imports for large sets
const LazyIcon = React.lazy(() => import('lucide-react').then(module => ({
default: module[iconName]
})))
// ✅ Good: Memoize components
const MemoHeart = React.memo(Heart)
import * patternsaria-label for icon-only buttonscurrentColor| 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 |
# Core libraries
npm install lucide-react
npm install @heroicons/react
npm install @phosphor-icons/react
npm install @tabler/icons-react
npm install @radix-ui/react-icons
# Multi-library support
npm install react-icons
npm install @iconify/react
# Brand icons
npm install simple-icons
Version: 4.0.0 Enterprise Last Updated: 2025-11-13 Status: Production Ready Enterprise Grade: ✅ Full Enterprise Support