cclohmar/OpenWriterControle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
OpenWriterControle/plugins/claude-code/scripts/context/ui/web/icons-guide.md
Darren Hinde a8fc9c7715
feat(plugin): enhance context management and skill invocation (#239) 
* fix(shellcheck): declare and assign separately in router.sh (SC2155)

* feat(plugin): enhance context management and skill invocation

- Update .context-manifest.json to include profile and detailed source information.
- Revise context-scout.md to clarify context root discovery and navigation.
- Modify commands to replace deprecated skills with updated ones (brainstorming → approach, systematic-debugging → debugger).
- Streamline install-context.md for clarity and remove interactive profile selection.
- Improve oac-status.md to provide a more comprehensive status report.
- Add OAC system paths to session-start.sh for better context management.
- Remove obsolete skills and improve documentation for existing commands.
2026-02-23 12:12:29 +00:00

3.1 KiB
Raw Blame History

Icon Systems

Purpose: Guidelines for using icon libraries

Quick Reference

Library Loading Recommended For
Lucide CDN script Default choice
Heroicons Inline SVG Tailwind projects
Font Awesome CDN CSS Brand icons

Lucide Icons (Recommended Default)

Loading

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<!-- Or specific version -->
<script src="https://unpkg.com/lucide@0.294.0/dist/umd/lucide.min.js"></script>

Usage

<i data-lucide="home"></i>
<i data-lucide="user"></i>
<i data-lucide="settings"></i>
<i data-lucide="heart" class="w-6 h-6 text-red-500"></i>

<script>lucide.createIcons();</script>

Common Icons

Navigation: home, menu, x, chevron-down, arrow-left, arrow-right
User: user, user-plus, users, user-check
Actions: edit, trash, save, download, upload, share, copy
Communication: mail, message-circle, phone, send
Media: image, video, music, file, folder
UI: search, settings, bell, heart, star, bookmark
Status: check, x, alert-circle, info, help-circle

Heroicons

Usage (Inline SVG)

<!-- Outline (24x24) -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3..." />
</svg>

<!-- Solid (20x20) -->
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7..." />
</svg>

Font Awesome

Loading

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Usage

<!-- Solid -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>

<!-- Regular -->
<i class="far fa-heart"></i>

<!-- Brands -->
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>

<!-- Sizing -->
<i class="fas fa-home fa-2x"></i>

Accessibility Best Practices

<!-- Icon with visible text -->
<button class="flex items-center gap-2">
  <i data-lucide="trash" aria-hidden="true"></i>
  <span>Delete</span>
</button>

<!-- Icon-only button -->
<button aria-label="Delete item">
  <i data-lucide="trash"></i>
</button>

<!-- Decorative icon -->
<div>
  <i data-lucide="star" aria-hidden="true"></i>
  <span>Featured</span>
</div>

<!-- Screen reader text -->
<button>
  <i data-lucide="search" aria-hidden="true"></i>
  <span class="sr-only">Search</span>
</button>

Custom SVG

<!-- Custom icon -->
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
    d="M12 4v16m8-8H4" />
</svg>

<!-- Logo -->
<svg class="h-8 w-auto" viewBox="0 0 100 40" fill="currentColor">
  <path d="M10 10h80v20H10z" />
</svg>

Related

  • images-guide.md - Image guidelines
  • fonts-guide.md - Font loading
  • cdn-resources.md - CDN libraries