AGENT SKILL

lucide-icons

暂无简介

License 许可
MIT
最近更新
2026-11-12
Stars
★ 3
Forks
1

02 资源文件 8

03 SKILL.md 正文

Lucide Icons Skill

Search, download, and customize Lucide icons (1000+ beautiful SVG icons).

Quick Start

# Search for icons
node ./scripts/lucide.js search heart

# Download an icon
node ./scripts/lucide.js download heart --output ./icons/

# Download with React component
node ./scripts/lucide.js download heart --output ./icons/ --format svg,react

# Customize icon
node ./scripts/lucide.js download star --color "#ffd700" --size 32

Commands

search <keyword>

Search for icons by name or keyword.

lucide search heart --limit 10

download <icon-name>

Download a single icon with optional customization.

Options:

  • -o, --output <dir> - Output directory (default: current directory)
  • -f, --format <formats> - Output formats: svg, react (default: svg)
  • -c, --color <color> - Icon color (default: currentColor)
  • -s, --size <size> - Icon size in pixels (default: 24)
  • -w, --stroke-width <width> - Stroke width (default: 2)
  • --overwrite - Overwrite existing files

list

List all available icons.

lucide list --limit 50

info <icon-name>

Show detailed information about an icon.

lucide info heart

refresh

Refresh the icon metadata cache.

lucide refresh

Installation

Before first use, install dependencies:

cd ./scripts && npm install

Output Formats

SVG

Standard SVG file with optional customization (color, size, stroke-width).

React (TypeScript)

Generates a fully-typed React component with props:

  • size - Icon size
  • color - Icon color
  • strokeWidth - Stroke width
  • className - CSS classes
  • style - Inline styles
  • aria-label - Accessibility label

Examples

# Download heart icon to src/icons/
lucide download heart -o ./src/icons/

# Download with custom color and size
lucide download star --color "#ffd700" --size 32 -o ./icons/

# Generate both SVG and React component
lucide download check-circle --format svg,react -o ./src/components/icons/

# Search for arrow icons
lucide search arrow --limit 20

Data Source

Icons are fetched from the official Lucide repository.

More Information

See README.md for detailed documentation.

04 同仓库更多 Skills

welflau
welflau/ai-dev-system

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

前端开发
★ 3
welflau
welflau/ai-dev-system

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

设计师前端开发视觉设计
★ 3
welflau
welflau/ai-dev-system

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

视觉设计
★ 3
welflau
welflau/ai-dev-system

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

视觉设计
★ 3
welflau
welflau/ai-dev-system

browsing

Use when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content extraction via use_browser MCP tool

Skill与智能体开发
★ 3
welflau
welflau/ai-dev-system

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."

邮件与沟通图像与多媒体
★ 3