skills.rest
Gambitnl
GambitnlCOMMUNITY
Explore all skills by this author →
GitHub

Manage Icons

Manage SVG icons in the Aralia codebase via IconRegistry.tsx and VALID_ICONS.

Updated Nov 23, 2025
Search Tags:#frontend development#icons#svg#component management#material symbols#mdi
One-click install
npx skills add https://github.com/Gambitnl/Aralia --skill manage-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Manage Icons
Source: https://github.com/Gambitnl/Aralia/tree/main/public/agent-docs/skills/manage_icons
Command: npx skills add https://github.com/Gambitnl/Aralia --skill manage-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive workflow for managing icons within the Aralia codebase, ensuring consistency and efficient updates.

Core Features & Use Cases

  • Add New Icons: Guides through sourcing, registering, and validating new icons from Material Design Icons (MDI) and Google Material Symbols.
  • Audit & Update: Helps identify missing or outdated icons and provides methods for updating their status (Normal, Selected, Deprecated, Update).
  • Troubleshooting: Offers solutions for common icon-related issues like fallback rendering or persistent old versions.
  • Use Case: A developer needs to add a new "user profile" icon to the application. This skill will guide them through finding the correct SVG, registering it in the IconRegistry.tsx file, and ensuring it's recognized by the system.

Quick Start

Use the Manage Icons skill to add a new 'star' icon to the Aralia codebase.

Frequently Asked Questions about Manage Icons

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

FAQPage Schema
How do I add new SVG icons from Material Design to a codebase?▼

To add new SVG icons from Material Design, you need to source the SVG assets, register them in an IconRegistry file, and validate them against a glossary table. This ensures the icons are properly recognized within your application.

Why is my SVG icon rendering a fallback instead of the correct graphic?▼

SVG icon fallback rendering typically occurs when the icon is not properly validated in the glossary table or lacks a unique key in the registry. Troubleshooting involves auditing the icon registration and resolving any duplicate keys.

Can I use Google Material Symbols and MDI icons together in the same project?▼

Yes, you can use Google Material Symbols and Material Design Icons (MDI) together. The icon management process supports sourcing, registering, and validating SVG assets from both libraries within the same codebase configuration.

What is the best way to audit and update outdated icons in a frontend project?▼

The best way to audit and update outdated icons is to review their status in a preview configuration file. You can categorize icons as Normal, Selected, Deprecated, or Update to systematically manage their lifecycle.

How do I fix duplicate icon keys when registering SVG components?▼

To fix duplicate icon keys when registering SVG components, you must audit the icon registry to identify conflicts and ensure each new icon has a unique identifier validated against the system's glossary table.

Does adding Material Symbols require updating the GlossaryTraitTable?▼

Yes, adding Material Symbols requires validating the new icons against the VALID_ICONS list in the GlossaryTraitTable. This step ensures the newly registered SVG assets are recognized and prevents fallback rendering issues.

Related Skills

Explore More Software Engineering Skills→
kozyszookozyszoo
1

marp-presentation

Generate Marp presentations with pastel themes and Material Symbols from Markdown files.

Community
Intermediate
majiayu000majiayu000
12

sage-ui-design

Standardize terminal UI alignment, colors, and icons for Sage CLI.

Community
Basic
Atrium-HermesAtrium-Hermes

Config Validator

Validate aeon.yml and GitHub Actions workflow structural correctness.

Community
Intermediate
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate