webrenew/unicon

Overview

This skill helps you add and manage icons in projects using the Unicon icon library. It exposes CLI-driven workflows and integrations for React, Vue, Svelte, and plain web projects so you generate only the icons you need from 19,000+ sources. Use it to search, fetch, bundle, preview, and audit icons with tree-shakeable output and framework-aware component formats.

How this skill works

The skill wraps Unicon CLI commands and the Unicon API to perform semantic searches, fetch single icons, build bundles, and generate framework-specific components (React .tsx, Vue .vue, Svelte .svelte, or raw SVG). It reads and writes a .uniconrc.json config, caches results locally, and can watch your config to auto-regenerate icon files. Outputs are generated per-icon so imports remain tree-shakeable and minimal.

When to use it

• Adding icons to React, Vue, Svelte, or plain web projects without installing huge icon packages
• When you need framework-ready components (TSX, SFC, Svelte) or raw SVGs for tooling
• To build curated icon bundles (by category, search query, or favorites) that remain tree-shakeable
• When you want to search across multiple icon libraries with semantic/AI-powered queries
• To audit projects for unused or missing icons and keep an up-to-date icon set

Best practices

• Run unicon init to create a .uniconrc.json and keep it checked into source control
• Use unicon search --pick interactively to select the best visual match before bundling
• Bundle icons by category or feature to keep imports scoped and tree-shakeable
• Enable unicon sync --watch during development for automatic regeneration
• Star commonly used icons and bundle --stars for a lightweight shared icon set

Example use cases

• Generate a nav icon bundle for a React app: unicon add nav --query "arrow chevron menu" && unicon sync
• Copy a single SVG to clipboard for use in a design file: unicon get home --copy
• Create a public SVG folder of social icons: unicon bundle --query "social media" --format svg -o ./public/icons
• Audit a codebase to find unused icon components: unicon audit
• Preview icons in terminal while deciding which to include: unicon preview star --width 24