eisland-dev-add-svg-icon

name	eisland-dev-add-svg-icon
author	鸡哥
description	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.

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)
├── calculator/*.svg       → CalculatorIcon (calculator-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
├── calculator-icon.ts     → CalculatorIcon 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
    ├── calculator-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
svg/FOO.svg	eisland-icon.ts	SvgIcon	./svg/
svg/agent/FOO.svg	agent-icon.ts	AgentIcon	./svg/agent/
svg/calculator/FOO.svg	calculator-icon.ts	CalculatorIcon	./svg/calculator/
svg/countries/FOO.svg	country-icon.ts	CountryIcon	./svg/countries/
svg/devicons/FOO.svg	dev-icon.ts	DevIcon	/svg/devicons/
svg/player/FOO.svg	player-icon.ts	PlayerIcon	./svg/player/
svg/services/FOO.svg	service-icon.ts	ServiceIcon	./svg/services/

Note the path prefix difference: root/agent/countries/player/services use ./svg/..., devicons use /svg/....

Step 2: Derive the enum key

Use the SVG filename (without extension), converted to UPPER_SNAKE_CASE for eisland-icon, agent-icon, and player-icon. Examples:

• FILTER.svg → FILTER
• CLAUDE.svg → CLAUDE
• PIN_ON_TOP.svg → PIN_ON_TOP
• applemusic.svg → APPLE_MUSIC
• qqmusic.svg → QQMUSIC

For country-icon and dev-icon, keys follow their existing conventions (e.g., CHN, javascript).

Step 3: Add to the enum

Read the enum file, then add the new entry before the closing } as const;. Keep entries sorted logically or grouped with related icons — match the existing ordering style.

eisland-icon.ts / agent-icon.ts / calculator-icon.ts / player-icon.ts / service-icon.ts pattern:

  NEW_ICON: './svg/NEW_ICON.svg',
  // player-icon.ts uses: './svg/player/name.svg'
  // service-icon.ts uses: './svg/services/name.svg'
  // calculator-icon.ts uses: './svg/calculator/name.svg'

country-icon.ts / dev-icon.ts: These have aliases and resolver functions. Only add if the user explicitly asks, and follow the existing alias/resolver patterns.

Step 4: Update the test file

Read the test file for the enum, then make three changes:

1. Add property assertion — add expect(EnumName).toHaveProperty('NEW_KEY'); in the "should contain expected keys" test block.

2. Update key count — the test has an assertion like expect(Object.keys(EnumName)).toHaveLength(N). Increment N by 1.

3. Path format check — verify the existing path regex test covers the new entry's path format. No change needed unless the path format differs from existing entries.

Step 5: Export from index.ts (new category only)

If adding to an existing enum file (eisland-icon, agent-icon, calculator-icon, etc.), no change to index.ts is needed — it's already exported.

If creating a new category (a new enum file), add the export to src/renderer/utils/SvgIcon/index.ts:

export { NewEnum } from './new-enum';
export type { NewEnumKey } from './new-enum';

Step 6: Run tests

npx vitest run src/renderer/utils/SvgIcon/test/<enum-name>.test.ts

All tests must pass. If the key count assertion fails, double-check the count update in Step 4.

Important rules

• Never modify existing entries — only add new ones
• Match existing code style — look at surrounding entries for trailing commas, spacing, comments
• Update key count in tests — forgetting this is the most common mistake
• Run tests before reporting done — verify the change actually works
• Path prefix must match the category — ./svg/ vs /svg/ matters