Upgrades simple-icons and migrates any removed icons to your custom local icon set.
Install
mkdir -p .claude/skills/upgrade-simple-icons && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3791" && unzip -o skill.zip -d .claude/skills/upgrade-simple-icons && rm skill.zipInstalls to .claude/skills/upgrade-simple-icons
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Upgrade simple-icons to the latest version and preserve any removed icons by sourcing them from the previous version into common/icons/customIcons.ts and updating icon mappings. Use whenever bumping or upgrading simple-icons in this repo.Key capabilities
- →Updates simple-icons package dependencies
- →Identifies missing icons post-upgrade via linting
- →Migrates deprecated icons to local custom storage
- →Reconstructs icon data objects from version history
- →Updates project icon mapping configuration
How it works
Compares icons before/after package updates, extracts missing definitions to a local TypeScript file, and rewires internal mappings.
Inputs & outputs
When to use upgrade-simple-icons
- →Upgrade icons package
- →Handle missing icons after package update
- →Migrate to custom icon storage
About this skill
Upgrade simple-icons
Workflow
- Record the current simple-icons version from
package.jsonandpnpm-lock.yaml. - Install the latest package:
pnpm add simple-icons@latest. - Reconcile icon imports:
- Review
common/icons/languageMapping.tsfor imports fromsimple-icons. - Run
pnpm lintorpnpm verifyto surface missing icon exports.
- Review
- If any previously used icon is missing after the upgrade:
- Download the previous simple-icons version (recorded in step 1) to a temporary location or install it briefly.
- Extract the icon data (
title,slug,hex,path). In simple-icons, this is available from thesi*export oricons/<slug>.jsonin the package. - Add a
custom<IconName>entry tocommon/icons/customIcons.tswith the extracted data. - Update
common/icons/languageMapping.tsto import and reference the custom icon. - Run
pnpm lint:fixto fix import ordering issues if any. - Remove any temporary dependency or scratch folder after the data is captured.
- Update relevant documentation if icon mappings or customization behavior changes.
- Run
pnpm verifybefore committing, and add a changeset for the upgrade.
When not to use it
- →When the icon set requires a complete visual redesign
- →Upgrading during a major project migration
Prerequisites
Limitations
- →Requires local history of the previous package version
- →Manual intervention needed if custom mapping logic is complex
How it compares
Automatically preserves icon availability when upstream package releases contain breaking removals.
Compared to similar skills
upgrade-simple-icons side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| upgrade-simple-icons (this skill) | 1 | 7mo | No flags | Intermediate |
| react-modernization | 21 | 2mo | No flags | Advanced |
| angular-modernization | 4 | 8mo | Review | Intermediate |
| svelte-migrate | 2 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by wei
View all by wei →You might also like
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
angular-modernization
bitwarden
Modernizes Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.
svelte-migrate
temporalio
Migrate a Svelte 4 component to Svelte 5 runes syntax. Use when asked to migrate, convert, or upgrade a .svelte file to Svelte 5.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
rendering-conditional-render
TheOrcDev
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might render unexpectedly.
creating-styled-wrappers
tambo-ai
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".