eisland-dev-add-svg-icon

Solid

Add a new SVG icon to the project's icon enum system with matching test assertions. Use this skill whenever the user asks to "add SVG icon", "添加图标", "add icon enum", "注册图标", "补齐图标枚举", "add SVG enum", or wants to register a new .svg file in the SvgIcon utility. Also trigger when the user provides a path to an .svg file and asks to create enum/test for it.

Web & Frontend 238 stars 11 forks Updated today GPL-3.0

Install

View on GitHub

Quality Score: 89/100

Stars 20%
79
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Add SVG Icon Enum and Test Register a new SVG file in the project's icon enum system and ensure test coverage. ## When to use - User provides an SVG file path and asks to add it to the enum - User says "添加图标", "add icon", "补齐枚举", "注册 SVG" - User adds a new `.svg` file to `src/renderer/public/svg/` and wants it registered ## Project structure ``` src/renderer/public/svg/ ├── *.svg → SvgIcon (eisland-icon.ts) ├── agent/*.svg → AgentIcon (agent-icon.ts) ├── countries/*.svg → CountryIcon (country-icon.ts) ├── devicons/*.svg → DevIcon (dev-icon.ts) ├── player/*.svg → PlayerIcon (player-icon.ts) └── services/*.svg → ServiceIcon (service-icon.ts) src/renderer/utils/SvgIcon/ ├── index.ts → unified exports ├── eisland-icon.ts → SvgIcon enum ├── agent-icon.ts → AgentIcon enum ├── country-icon.ts → CountryIcon enum + aliases + resolvers ├── dev-icon.ts → DevIcon enum + aliases + resolvers ├── player-icon.ts → PlayerIcon enum ├── service-icon.ts → ServiceIcon enum └── test/ ├── eisland-icon.test.ts ├── agent-icon.test.ts ├── country-icon.test.ts ├── dev-icon.test.ts ├── player-icon.test.ts └── service-icon.test.ts ``` ## Process ### Step 1: Identify the icon category Determine which enum the SVG belongs to based on its filesystem path: | SVG path | Enum file | Enum name | Path prefix | |----------|-----------|-----------|---------...

Details

Author
JNTMTMTM
Repository
JNTMTMTM/eIsland
Created
4 months ago
Last Updated
today
Language
TypeScript
License
GPL-3.0

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

svg-infographic

Author technical/structured SVG infographics and diagrams, then render them to crisp PNG with a headless browser. Best for architecture diagrams, topology maps, flows, before/after comparisons, nested/onion layer models, roadmaps, decision matrices, and social-ready technical one-pagers. Prefers clean line icons in soft tinted circles. First-class Korean/CJK text. Includes an opt-in "tidy hand-drawn" sketch preset (paper background, Korean handwriting font, rough strokes, highlighter). Not for photo-heavy or illustration-heavy graphics, statistical charts, or mascot/character illustration.

66 Updated today
kyungseo
Data & Documents Solid

svg

Load this skill whenever the project contains SVG graphics — inline SVGs, external SVG files, SVG icons, SVG illustrations, or SVG-based data visualizations. Under no circumstances use SVG without proper accessible titles, descriptions, and ARIA roles where required. Absolutely always add <title> and <desc> to meaningful SVGs and set role="img" with aria-labelledby pointing to those elements. Also apply this skill whenever the project accepts untrusted or user-uploaded SVG content, which requires sanitization before rendering.

35 Updated today
mgifford
AI & Automation Listed

ios-icon-gen

Use when generating PNG icon imagesets (1x/2x/3x plus Contents.json) for Xcode asset catalogs, from SF Symbols (macOS, offline) or the Iconify API (275k+ open-source icons). Covers the bundled generator scripts, Iconify collection prefixes, and common SF Symbol names.

1 Updated 2 days ago
Mixard