icons

Add inline SVG icons to a React UI while enforcing a no-emoji CI rule.

Updated May 6, 2026
One-click install
npx skills add https://github.com/BanePlayss/primitivao --skill icons-baneplayss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/BanePlayss/primitivao/tree/main/.opencode/skills/icons
Command: npx skills add https://github.com/BanePlayss/primitivao --skill icons-baneplayss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? The Primitivão app forbids Unicode emojis in the UI, and a CI lint rule blocks any push containing them. This Skill guides you to add or change visual symbols using the project's inline-SVG <Icon name="..."> component instead, so your UI stays consistent and your pushes pass CI. ## Core Features & Use Cases - Add new SVG icons: Insert a new case in the switch (name) inside function Icon(...) in apostas/apostas-app.jsx, drawing on a 24x24 viewBox with currentColor styling. - No-emoji CI compliance: Run the provided local Node.js check to detect forbidden emoji ranges in non-comment lines before pushing, since lint.yml blocks offending commits. - Themed championship icons: Assign a distinct icon per championship via TABLOID_THEMES[champId].icon, reusing well-drawn existing icons (skull, target, sword, rocket, trophy, etc.) before creating new ones. - Use Case: You need a warning symbol in a new admin panel. Instead of pasting ⚠, you add a case 'warning' to the Icon switch, document it in CLAUDE.md §1, and verify with the local emoji check that the push will pass. ## Quick Start Add a new icon to the app by creating a new case in the Icon component's switch statement and verify no emojis exist by running the local lint check before pushing.

Frequently Asked Questions about icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new icon to a React SVG icon component?▼

Open the switch (name) inside function Icon(...) in apostas/apostas-app.jsx and add a new case returning an SVG element. Draw on the 24x24 viewBox using stroke="currentColor" fill="none" for lineart or fill="currentColor" for solid icons, with rounded linecaps and linejoins.

How to replace emojis with SVG icons in a web app UI?▼

Replace every Unicode emoji with the inline-SVG <Icon name="..." size={N} /> component, which renders 24x24 SVG glyphs colored via currentColor. The project forbids emojis entirely, so all decorative symbols must go through this component.

Why does my push get blocked by the no-emoji CI lint rule?▼

The lint.yml workflow scans non-comment lines for emoji Unicode ranges and blocks the push if any are found. Run the provided local Node.js check against apostas/apostas-app.jsx before pushing; it prints EMOJI@ with offending line numbers or OK.

Are any Unicode symbols allowed under the no-emoji rule?▼

Yes. National flag characters used as World Cup content and CJK characters (like 闘 球 速) used as decorative tabloid text are permitted and pass the check. All other emoji ranges such as 1F000-1FFFF and 2600-27BF are blocked.

How do I assign a distinct icon per championship in the tabloid?▼

Set the icon field in TABLOID_THEMES[champId].icon for each championship, keeping every championship's icon distinct. Prefer reusing existing well-drawn icons like skull, target, sword, rocket, football, flag, globe, crown, fire, or trophy before drawing new ones.