跳至主要内容
小龙虾小龙虾AI
🤖

🦄 Unicon CLI

Add and manage 19,000+ icons from 9 libraries in React, Vue, Svelte, or web projects using the Unicon CLI for search, bundles, previews, and tree-shakable co...

下载334
星标2
版本0.2.0
general
安全通过
⚙️脚本

技能说明


name: unicon description: Help users add icons to their projects using the Unicon icon library. Unicon provides 19,000+ icons from Lucide, Phosphor, Hugeicons, Heroicons, Tabler, Feather, Remix, Simple Icons (brand logos), and Iconoir. Use when adding icons to React, Vue, Svelte, or web projects; using the unicon CLI to search, get, or bundle icons; setting up .uniconrc.json config; generating tree-shakeable icon components; using the Unicon API; or converting between icon formats. license: MIT metadata: author: webrenew version: "0.2.0" website: https://unicon.sh repository: https://github.com/WebRenew/unicon openclaw: emoji: "🦄" requires: bins: ["node"] install: - type: node package: "@webrenew/unicon" global: true

Unicon

Unicon is a unified icon library providing 19,000+ icons from 9 popular libraries. Unlike traditional npm packages that bundle thousands of icons, Unicon generates only the icons you need.

Quick Start

# Install CLI globally
npm install -g @webrenew/unicon

# Or use directly with npx
npx @webrenew/unicon search "dashboard"

Core Commands

CommandDescription
unicon search <query>AI-powered semantic search (supports --pick for interactive selection)
unicon get <name>Get single icon to stdout, file, or clipboard (--copy)
unicon info <name>Show detailed icon information
unicon preview <name>ASCII art preview in terminal
unicon bundleBundle multiple icons (supports --stars for favorites)
unicon initCreate .uniconrc.json config (--interactive for wizard)
unicon syncRegenerate bundles (--watch for auto-sync)
unicon add <name>Add bundle to config
unicon star <name>Add icon to favorites
unicon auditFind unused/missing icons in project
unicon sourcesList available icon libraries
unicon categoriesList icon categories
unicon cacheManage local cache
unicon skillInstall AI assistant skills

Output Formats

FormatExtensionUse Case
react.tsxReact/Next.js (auto-detected)
vue.vueVue 3 SFC (auto-detected)
svelte.svelteSvelte components (auto-detected)
svg.svgRaw SVG markup
json.jsonData/programmatic use

Note: CLI auto-detects your framework from package.json and uses the appropriate format.

Icon Sources

SourceIconsDescription
lucide1,900+Beautiful & consistent
phosphor1,500+6 weights available
hugeicons1,800+Modern outlined icons
heroicons292Tailwind Labs
tabler4,600+Pixel-perfect stroke
feather287Simple and clean
remix2,800+Multiple categories
simple-icons3,300+Brand logos
iconoir1,600+Modern outlined icons

Common Workflows

Add Icons to a React Project

# 1. Initialize config (interactive wizard)
unicon init --interactive

# 2. Search for icons interactively
unicon search "navigation arrows" --pick

# 3. Add bundle to config
unicon add nav --query "arrow chevron menu"

# 4. Generate components
unicon sync

# 5. Import and use
# import { ArrowRight, Menu } from "./src/icons/nav"

Get a Single Icon Quickly

# Output to stdout (auto-detects framework)
unicon get home

# Copy to clipboard directly
unicon get home --copy

# Save to file
unicon get settings --format react -o ./Settings.tsx

# Different framework
unicon get home --format vue -o ./Home.vue

Interactive Search with Selection

# Search and pick icons interactively
unicon search "dashboard" --pick

# Then choose action: copy, save, star, or create bundle

Bundle by Category

# Bundle all dashboard icons (tree-shakeable by default)
unicon bundle --category Dashboards -o ./src/icons

# Bundle specific icons by search
unicon bundle --query "social media" --format svg -o ./public/icons

# Bundle all favorited icons
unicon bundle --stars -o ./src/icons/favorites

# Single file mode (not tree-shakeable)
unicon bundle --query "ui" --single-file -o ./icons.tsx

Favorites System

# Star icons for later
unicon star home
unicon star settings
unicon star user

# Bundle all starred icons
unicon bundle --stars -o ./src/icons/favorites

# View favorites
unicon favorites

Watch Mode for Development

# Auto-regenerate when config changes
unicon sync --watch

Audit Project Usage

# Find unused bundled icons and missing imports
unicon audit

Preview Icons in Terminal

# ASCII art preview
unicon preview home

# Custom size
unicon preview star --width 24

Tree-Shaking Benefits

Unlike npm install lucide-react which downloads thousands of icons:

  • Generates only the icons you need as individual files
  • No external dependencies to ship
  • True tree-shaking with one component per file
  • Import only what you use: import { Home } from "./icons"

Web Interface

Browse and copy icons at: https://unicon.sh

  • Visual search with AI
  • One-click copy (SVG, React, Vue, Svelte)
  • Filter by library and category
  • Bundle builder for multiple icons

References

AI Assistant Integration

Install Unicon skills for AI coding assistants:

# List supported assistants
unicon skill --list

# Install for specific assistant
unicon skill --ide claude      # Claude Code
unicon skill --ide cursor      # Cursor
unicon skill --ide windsurf    # Windsurf

# Install for all supported assistants
unicon skill --all

Supported AI Assistants

IDEDirectory
Claude Code.claude/skills/unicon/SKILL.md
Cursor.cursor/rules/unicon.mdc
Windsurf.windsurf/rules/unicon.md
Agent.agent/rules/unicon.md
Antigravity.antigravity/rules/unicon.md
OpenCode.opencode/rules/unicon.md
Codex.codex/unicon.md
Aider.aider/rules/unicon.md

Once installed, ask your AI assistant: "Add a home icon to my project"

Cache

Icons are cached locally at ~/.unicon/cache for 24 hours:

unicon cache --stats   # Show cache info
unicon cache --clear   # Clear cache

如何使用「🦄 Unicon CLI」?

  1. 打开小龙虾AI(Web 或 iOS App)
  2. 点击上方「立即使用」按钮,或在对话框中输入任务描述
  3. 小龙虾AI 会自动匹配并调用「🦄 Unicon CLI」技能完成任务
  4. 结果即时呈现,支持继续对话优化

相关技能