Skip to content

Refactor simple-icons naming to use kebab-case with hyphens#660

Merged
klagrida merged 5 commits intomainfrom
claude/improve-icon-naming-zzR73
Feb 25, 2026
Merged

Refactor simple-icons naming to use kebab-case with hyphens#660
klagrida merged 5 commits intomainfrom
claude/improve-icon-naming-zzR73

Conversation

@klagrida
Copy link
Collaborator

Summary

This PR refactors the simple-icons generator and icon components to use consistent kebab-case naming with hyphens instead of camelCase. This improves readability and follows common naming conventions for multi-word identifiers.

Key Changes

  • Removed hardcoded filename mappings: Deleted filename-mappings.ts which contained a large mapping table for component names
  • Updated generator logic: Modified generator.ts to dynamically generate kebab-case names instead of relying on static mappings
  • Renamed icon component files: Systematically renamed all icon component files from camelCase (e.g., 1and1-icon.ts) to kebab-case with hyphens (e.g., 1-and-1-icon.ts)
  • Updated component selectors: Changed all component selectors from camelCase format (e.g., svg[siAbbIcon]) to kebab-case format (e.g., svg[si-abb-icon])
  • Added naming documentation: Created ICON_NAMING.md to document the new naming strategy

Notable Implementation Details

  • The refactoring affects hundreds of icon components across the simple-icons library
  • The naming convention now consistently uses hyphens to separate words (e.g., air-asia-icon.ts, apache-airflow-icon.ts)
  • Component selectors follow the same kebab-case pattern for consistency
  • The generator now derives names algorithmically rather than from a static mapping table, making it more maintainable and scalable

https://claude.ai/code/session_01C6h4nwdPqhXiZJ6pwRnQo9

…f filenames

Replace the filename-based naming approach with title-based naming using
the simple-icons metadata. The titles from simple-icons.json already have
proper word boundaries and brand-accurate casing (e.g., "GitHub", "Stack
Overflow", "PayPal"), eliminating the need for the 230+ manual filename
mappings table.

Key changes:
- Add titleToComponentName() that converts brand titles to PascalCase
  while preserving original brand casing
- Add getSlugSuffix() for disambiguating the 7 icons with duplicate titles
- Build slug→metadata map for O(1) lookups instead of linear scans
- Remove filename-mappings.ts (no longer needed)
- Regenerate all 3397 icon components with new naming

https://claude.ai/code/session_01C6h4nwdPqhXiZJ6pwRnQo9
Convert each word to standard PascalCase (first letter uppercase, rest
lowercase) instead of preserving brand casing. e.g., GitHub → Github,
PayPal → Paypal, YouTube → Youtube.

https://claude.ai/code/session_01C6h4nwdPqhXiZJ6pwRnQo9
@klagrida klagrida merged commit 0da899c into main Feb 25, 2026
2 checks passed
@klagrida klagrida deleted the claude/improve-icon-naming-zzR73 branch February 25, 2026 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants