← ClaudeAtlas

orbit-designer-iconslisted

Audit icon usage across a WordPress plugin's admin UI — icon library consistency (one set, not three), accessible-icon patterns (label + role), inline SVG vs icon-font tradeoffs, dashicons vs custom SVGs, icon-only buttons accessibility. Use when the user says "icon audit", "icon system", "dashicons", "SVG icons".
adityaarsharma/orbit · ★ 1 · Web & Frontend · score 55
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