orbit-designer-iconslisted
Install: claude install-skill adityaarsharma/orbit
# 🪐 orbit-designer-icons — Icon system audit
Plugins routinely ship 3 icon libraries (Dashicons + Font Awesome + custom SVG) for no good reason. This audit catches the duplication and proposes a single source.
---
## Quick start
```bash
claude "/orbit-designer-icons Audit ~/plugins/my-plugin's icon usage."
```
---
## What it checks
### 1. Library inventory
Greps every PHP / JS / CSS file for:
- `dashicons-*` classes
- `fa-*` / `fas` / `far` / `fab` (Font Awesome)
- Inline SVG `<svg>` elements
- Custom icon-font CSS (e.g. `eicon-*` from Elementor)
- IconJar / Heroicons / Phosphor / Tabler embeds
```
[Icons] my-plugin
Libraries detected:
- Dashicons: 47 references (WP-bundled, free)
- Font Awesome: 23 references (3rd-party, requires license for Pro icons)
- Custom SVG: 18 inline (mixed sizes, inconsistent stroke widths)
- Icomoon: 4 references (1 forgotten leftover from 2022)
⚠ 4 different icon systems in one plugin. Recommend consolidating.
```
### 2. Inline SVG > icon font (modern best practice)
**Whitepaper intent:** Icon fonts have accessibility issues (screen readers read the unicode char), CSP issues (require `font-src`), and load-order issues (FOUT/FOIT). Inline SVGs are crisp, accessible, and tree-shakeable.
```html
<!-- ❌ Icon font -->
<i class="fa fa-trash"></i>
<!-- ✅ Inline SVG -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="..." />
</svg>
```
### 3. Icon-only button accessibili