Menu
网站图标库集成指南，提供 Lucide Icons 和 Heroicons 的使用规范和最佳实践
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Design-system enforcement contract for generated website UI. Use when creating or refining sections, pages, shells, forms, cards, tables, and navigation.
Defines the end-to-end website generation workflow. Invoke when generating multi-section pages or full websites.
Website-only import adapted from HTML Anything template discipline for cinematic AI/product launch pages with staged demo proof and sharp CTA focus.
Website-only import adapted from HTML Anything template discipline for resource hubs and information-platform routes.
Website-only import adapted from HTML Anything template discipline for documentation/reference pages. Default primary template discipline for docs and reference routes.
Website-only import adapted from HTML Anything template discipline for industrial product catalogs, spec comparison, and buyer inquiry routes.
| name | web-icon-library |
| description | 网站图标库集成指南，提供 Lucide Icons 和 Heroicons 的使用规范和最佳实践 |
特点：
安装：
# React
npm install lucide-react
# Vue
npm install lucide-vue-next
# 纯 HTML/CDN
<script src="https://unpkg.com/lucide@latest"></script>
特点：
安装：
# React
npm install @heroicons/react
# 纯 HTML/CDN
直接使用 SVG 代码
import { Home, User, Settings, ChevronRight, Check } from 'lucide-react';
function MyComponent() {
return (
<div>
{/* 基础使用 */}
<Home />
{/* 自定义大小和颜色 */}
<User size={32} color="#3B82F6" />
{/* 自定义描边宽度 */}
<Settings size={24} strokeWidth={1.5} />
{/* 使用 CSS 类 */}
<ChevronRight className="w-6 h-6 text-blue-500" />
{/* 绝对像素大小 */}
<Check absoluteStrokeWidth size={20} />
</div>
);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<!-- 使用 data-lucide 属性 -->
<i data-lucide="home"></i>
<i data-lucide="user" class="w-8 h-8 text-blue-500"></i>
<i data-lucide="settings"></i>
<script>
// 初始化所有图标
lucide.createIcons();
</script>
</body>
</html>
<!-- 直接嵌入 SVG 代码 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
import {
Home, // 首页
Menu, // 菜单
X, // 关闭
ChevronDown, // 下拉
ChevronRight, // 右箭头
ArrowRight, // 箭头
ExternalLink // 外部链接
} from 'lucide-react';
import {
Search, // 搜索
Settings, // 设置
User, // 用户
Bell, // 通知
Mail, // 邮件
Phone, // 电话
Calendar, // 日历
Clock, // 时间
Download, // 下载
Upload, // 上传
Share2, // 分享
Heart, // 喜欢
Star, // 收藏
Bookmark // 书签
} from 'lucide-react';
import {
Check, // 成功/完成
X, // 错误/关闭
AlertCircle, // 警告
Info, // 信息
HelpCircle, // 帮助
Loader, // 加载中
CheckCircle, // 成功圆圈
XCircle, // 错误圆圈
AlertTriangle // 警告三角
} from 'lucide-react';
import {
Twitter, // Twitter/X
Facebook, // Facebook
Instagram, // Instagram
Linkedin, // LinkedIn
Github, // GitHub
Youtube, // YouTube
Mail // Email
} from 'lucide-react';
import {
ShoppingCart, // 购物车
CreditCard, // 支付
DollarSign, // 价格
TrendingUp, // 增长
BarChart, // 图表
PieChart, // 饼图
Package, // 产品
Truck // 配送
} from 'lucide-react';
import {
File, // 文件
FileText, // 文本文件
Folder, // 文件夹
Image, // 图片
Video, // 视频
Music, // 音乐
Edit, // 编辑
Trash, // 删除
Copy, // 复制
Save // 保存
} from 'lucide-react';
// 小图标（按钮内、表单）
<Icon size={16} />
// 标准图标（导航、列表）
<Icon size={20} />
<Icon size={24} />
// 大图标（功能卡片、特性展示）
<Icon size={32} />
<Icon size={48} />
// 超大图标（Hero section、空状态）
<Icon size={64} />
<Icon size={96} />
// 使用设计系统颜色
<Icon color="var(--color-primary)" />
<Icon color="var(--color-secondary)" />
// 使用 Tailwind 类
<Icon className="text-blue-500" />
<Icon className="text-gray-600" />
// 继承父元素颜色
<Icon color="currentColor" />
// 细线（优雅、轻量）
<Icon strokeWidth={1} />
<Icon strokeWidth={1.5} />
// 标准（推荐）
<Icon strokeWidth={2} />
// 粗线（强调、醒目）
<Icon strokeWidth={2.5} />
<Icon strokeWidth={3} />
// Tailwind CSS 响应式
<Icon className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6" />
// 或使用 size prop
<Icon size={isMobile ? 20 : 24} />
import { Loader } from 'lucide-react';
<Loader className="animate-spin" />
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
<Icon className="transition-colors hover:text-blue-500" />
<Icon className="transition-transform hover:scale-110" />
// React
<Home aria-label="返回首页" />
// HTML
<i data-lucide="home" aria-label="返回首页"></i>
// 纯装饰，屏幕阅读器忽略
<Icon aria-hidden="true" />
// 带文字的按钮
<button>
<Home className="mr-2" />
返回首页
</button>
// 纯图标按钮（必须有 aria-label）
<button aria-label="返回首页">
<Home />
</button>
// components/Icon.jsx
import * as LucideIcons from 'lucide-react';
export function Icon({ name, size = 24, color = 'currentColor', className = '', ...props }) {
const IconComponent = LucideIcons[name];
if (!IconComponent) {
console.warn(`Icon "${name}" not found`);
return null;
}
return (
<IconComponent
size={size}
color={color}
className={className}
{...props}
/>
);
}
// 使用
<Icon name="Home" size={24} />
<Icon name="User" className="text-blue-500" />
# 搜索包含 "home" 的图标
grep -r "home" node_modules/lucide-react/dist/esm/icons/
# 列出所有可用图标
ls node_modules/lucide-react/dist/esm/icons/
// ✅ 好：只导入需要的图标
import { Home, User } from 'lucide-react';
// ❌ 差：导入整个库
import * as Icons from 'lucide-react';
import { lazy, Suspense } from 'react';
const Icon = lazy(() => import('./Icon'));
<Suspense fallback={<div className="w-6 h-6" />}>
<Icon name="Home" />
</Suspense>
<!-- 定义 sprite -->
<svg style="display: none;">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
</svg>
<!-- 使用 -->
<svg class="w-6 h-6">
<use href="#icon-home"/>
</svg>
:root {
--icon-size-sm: 16px;
--icon-size-md: 24px;
--icon-size-lg: 32px;
--icon-color-primary: #3B82F6;
--icon-color-secondary: #6B7280;
}
.icon {
width: var(--icon-size-md);
height: var(--icon-size-md);
color: var(--icon-color-primary);
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'icon-sm': '16px',
'icon-md': '24px',
'icon-lg': '32px',
}
}
}
}
<nav>
<a href="/"><Home size={20} /> 首页</a>
<a href="/about"><Info size={20} /> 关于</a>
<a href="/contact"><Mail size={20} /> 联系</a>
</nav>
<div className="feature-card">
<div className="icon-wrapper">
<Zap size={48} color="#3B82F6" />
</div>
<h3>快速高效</h3>
<p>闪电般的加载速度</p>
</div>
<button className="btn-primary">
<Download size={20} />
下载应用
</button>
<button className="btn-icon" aria-label="搜索">
<Search size={20} />
</button>
<ul>
<li><Check size={16} className="text-green-500" /> 功能一</li>
<li><Check size={16} className="text-green-500" /> 功能二</li>
<li><Check size={16} className="text-green-500" /> 功能三</li>
</ul>
<div className="alert alert-success">
<CheckCircle size={20} />
操作成功！
</div>
<div className="alert alert-error">
<XCircle size={20} />
操作失败！
</div>
从其他图标库迁移到 Lucide：
| Font Awesome | Heroicons | Lucide |
|---|---|---|
| fa-home | HomeIcon | Home |
| fa-user | UserIcon | User |
| fa-cog | CogIcon | Settings |
| fa-search | MagnifyingGlassIcon | Search |
| fa-bars | Bars3Icon | Menu |
| fa-times | XMarkIcon | X |
| fa-check | CheckIcon | Check |
| fa-chevron-down | ChevronDownIcon | ChevronDown |
使用图标时确保：
在生成网站代码时：
示例：
// Hero Section
<section className="hero">
<h1>快速构建现代网站</h1>
<button>
<Rocket size={20} />
立即开始
</button>
</section>
// Features Section
<div className="features">
<div className="feature">
<Zap size={32} color="var(--color-primary)" />
<h3>快速</h3>
</div>
<div className="feature">
<Shield size={32} color="var(--color-primary)" />
<h3>安全</h3>
</div>
<div className="feature">
<Sparkles size={32} color="var(--color-primary)" />
<h3>优雅</h3>
</div>
</div>