ai-coding-demo

什么是 Lucide？

Lucide 是一个开源图标库，基于 Feather Icons 改进而来，提供 2000+ 高质量 SVG 图标，特点是：

风格统一（简洁线条）
支持多种框架（React、Vue、Angular 等）
可自定义大小、颜色、粗细

什么是 CDN？为什么用 CDN 引入？

CDN（Content Delivery Network）即内容分发网络。通过 CDN 引入 Lucide 图标，无需下载图标文件到本地，直接通过网络链接使用，优点是：

简单快捷：一行代码搞定，无需安装依赖
自动更新：CDN 会同步最新图标库版本
加载速度快：CDN 服务器全球分布，用户加载图标更快

如何通过 CDN 引入 Lucide 图标？

1. 添加 CDN 链接到 HTML

在 <head> 标签中加入 Lucide 的 CDN 链接：

<head>
  <script src="https://cdn.jsdelivr.net/npm/lucide-static@0.279.0/dist/lucide.min.js"></script>
</head>

📌 版本说明：0.279.0 是当前版本号，可在 Lucide CDN 页面查看最新版本。

2. 在页面中使用图标

在需要显示图标的地方，添加 <i> 标签并指定图标名称（格式：lucide-图标名）：

<!-- 显示一个笑脸图标 -->
<i class="lucide-smile"></i>

<!-- 显示一个搜索图标 -->
<i class="lucide-search"></i>

Lucide 会自动将这些标签替换为对应的 SVG 图标。

自定义图标样式

可以通过 CSS 直接修改图标的大小、颜色、粗细等：

<!-- 大红色搜索图标 -->
<i class="lucide-search text-3xl text-red-500"></i>

<!-- 蓝色小图标（结合Tailwind CSS） -->
<i class="lucide-heart text-blue-500 h-5 w-5"></i>

text-3xl：调整图标大小（Tailwind 字体大小类）
text-red-500：设置图标颜色（Tailwind 颜色类）
h-5 w-5：直接指定图标高度和宽度

完整示例：结合 Tailwind CSS 和 Lucide 图标

<!DOCTYPE html>
<html>
<head>
  <!-- 引入 Tailwind CSS -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  
  <!-- 引入 Lucide 图标 -->
  <script src="https://cdn.jsdelivr.net/npm/lucide-static@0.279.0/dist/lucide.min.js"></script>
</head>
<body class="p-8">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold mb-4">
      <i class="lucide-book text-green-500 mr-2"></i>
      学习资源
    </h2>
    
    <div class="flex space-x-4 mt-4">
      <button class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-md">
        <i class="lucide-download mr-2"></i>
        下载资料
      </button>
      
      <button class="flex items-center bg-gray-200 text-gray-800 px-4 py-2 rounded-md">
        <i class="lucide-share-2 mr-2"></i>
        分享
      </button>
    </div>
  </div>
</body>
</html>

效果：一个带图标的卡片，标题前有书籍图标，按钮内有下载和分享图标，所有图标可直接通过类名自定义样式。

常用 Lucide 图标名称

lucide-home：主页
lucide-user：用户
lucide-settings：设置
lucide-mail：邮件
lucide-star：星星
lucide-check：对勾
lucide-x：叉号

完整图标列表可查看 Lucide 官方网站。

注意事项

CDN 加载时机：CDN 链接需在使用图标前加载，建议放在 <head> 中。
图标名称大小写：图标名称需全小写，如 lucide-arrow-right，而非 lucide-ArrowRight。
版本兼容性：更新 CDN 版本时，注意检查是否有图标名称变更或 API 不兼容。

This site is open source. Improve this page.