skills.rest
mParticle
mParticleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

add-icon

Register new mParticle SVG icons into the Aquarium library with synchronized updates.

7|Updated Dec 5, 2023
Search Tags:#typescript#theming#svg#icon#registration#svg-optimization#aquarium
One-click install
npx skills add https://github.com/mParticle/aquarium --skill add-icon-mparticle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-icon
Source: https://github.com/mParticle/aquarium/tree/main/.claude/skills/add-icon
Command: npx skills add https://github.com/mParticle/aquarium --skill add-icon-mparticle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams seamlessly add new mParticle SVG icons to the Aquarium library by ensuring consistent registration, naming, and exports across the codebase.

Core Features & Use Cases

  • Automates the process of integrating an SVG into the icon system, including optimization, naming, and registry updates.
  • Ensures icons are available as <Icon name="iconName" /> and exported in the central icons map, types, and docs.
  • Use Case: When a designer provides a new logo SVG, this Skill registers it so it can be referenced across components without manual edits.

Quick Start

Provide the SVG file and a desired icon name to automatically integrate and register the icon across the Aquarium project.

Frequently Asked Questions about add-icon

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

FAQPage Schema
How do I add a new SVG icon to the Aquarium library?▼

To add an SVG icon to Aquarium, provide the SVG file and desired name. The system optimizes the SVG, updates asset registries, and ensures global availability across components without manual edits.

What steps are required to register SVG icons in a TypeScript design system?▼

Registering SVG icons in TypeScript requires applying naming conventions, optimizing the SVG file, and synchronizing updates across asset directories, icon index maps, and TypeScript type definitions for consistent usage.

How does SVG optimization work when adding icons to Aquarium?▼

SVG optimization processes the provided SVG file to ensure it meets Aquarium's standards before registration. This step is required to maintain performance and consistency across the icon system's global exports.

Do I need to manually update TypeScript types when adding a new icon?▼

No manual TypeScript type updates are needed. The registration process automatically synchronizes updates across the icons index, Icons map, and TypeScript type definitions to ensure the icon is exported correctly.

Can I use a newly registered SVG icon globally across my components?▼

Yes, newly registered SVG icons are globally available. Once added to the Aquarium library, icons can be referenced in any component using the <Icon name="iconName" /> syntax and are exported in the central icons map.

What should I provide to integrate a designer's new logo SVG into the codebase?▼

Provide the SVG file and a desired icon name. The system handles the SVG optimization, naming conventions, and registry updates required to integrate the logo seamlessly into the Aquarium project.

Related Skills

Explore More Software Engineering Skills→
JeroTanJeroTan
2

novel-uploader-guidelines-r2

Format and validate novel content for Cloudflare R2 uploads.

Community
Advanced
albanistrefialbanistrefi
4

umbraco-icons

Register custom SVG icons in Umbraco backoffice extension manifests.

Community
Intermediate
KrismithReddy12KrismithReddy12

design-shotgun

Generate multiple UI design variants and collect structured feedback for iteration.

Community
Intermediate
JKc66JKc66
14

better-icons

Search Iconify libraries and fetch SVGs by icon ID via CLI.

Community
Intermediate