Registers and renders inline SVG icons through a single Astro component registry.
npx skills add https://github.com/malikkotb/shellpluscore --skill icons-malikkotb
Please help me install this Agent Skill. Skill: icons Source: https://github.com/malikkotb/shellpluscore/tree/main/.agents/skills/icons Command: npx skills add https://github.com/malikkotb/shellpluscore --skill icons-malikkotb
src/components/Icon/ and are imported only by Icon.astro, making the icon set greppable and typo-safe via a derived IconName type. - Color and sizing contract: SVGs use currentColor to inherit the host's text color, and icons default to size-[1em] so they track the surrounding font size unless a size-* utility overrides it. - Accessible multi-state icons: State-dependent icons server-render every variant and switch with CSS off a data-* attribute, never a JS innerHTML swap, while accessible names always come from the host control. - Use Case: When adding a new arrow icon to an Astro site, drop the prepared SVG into the Icon folder, register it in Icon.astro, and render it with <Icon name="arrow-right" />. ## Quick Start Add a new icon to the project by placing the SVG in the Icon folder, registering it in Icon.astro, and rendering it with the Icon component.High-intent search queries and answers about installing and using this skill.
Drop the SVG file named icon-<kebab-name>.svg into src/components/Icon/, replace hardcoded fill and stroke colors with currentColor, then add the ?raw import and registry key in Icon.astro. Render it with <Icon name="<name>" />.
Replace every hardcoded fill or stroke hex value in the SVG with currentColor so the icon inherits the host element's text color. This prevents dark icons from disappearing on dark surfaces and lets one file serve every theme variant.
Server-render every icon state and toggle visibility with CSS keyed off a data-* attribute on an ancestor, using a named group like group/sound. The custom element only flips the attribute and updates the host control's aria-label, so focus and DOM identity survive the swap.
The Icon component's span carries aria-hidden="true", so assistive technology ignores anything inside it. Put the accessible name on the host control itself, such as an aria-label on the button or an sr-only text span.
No. Icon.astro is the only module allowed to import .svg?raw files, which keeps the icon set greppable and turns name typos into type errors. Raw SVG imports elsewhere, icon fonts, sprite sheets, and per-icon wrapper components are all out of scope.
AradotsoSynchronize Figma design tokens and components with code-ready formats.
awardsappValidate React .tsx UI changes for semantic HTML, ARIA, forms, dialogs, and keyboard navigation.
lemuStandardize typography, color, spacing, and iconography into design tokens and guidelines.
legioncodeincSelect icon libraries and delivery patterns for React applications.