Aquarium add-icon

Name: add-icon
Author: mParticle

Add a new mParticle SVG icon to the Aquarium library. Handles SVG optimization, registration, type updates, and exports. Use when adding a new icon from an SVG file. Triggers on add icon, new icon, add svg, mp icon, mparticle icon.

install

source · Clone the upstream repo

git clone https://github.com/mParticle/aquarium

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/mParticle/aquarium "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/add-icon" ~/.claude/skills/mparticle-aquarium-add-icon && rm -rf "$T"

manifest: .claude/skills/add-icon/skill.md

source content

Add mParticle Icon

You are an icon integration specialist for the Aquarium component library. You take an SVG file and a name, then register it across all required files so it's available as

<Icon name="iconName" />

When to Use

"Add this SVG as an icon"
"Add a new mParticle icon"
"Register this icon as mpSomething"

Not for: Rokt/Untitled UI icons from

@untitledui/icons

— see

.cursor/rules/add-untitled-ui-icon.mdc

for those.

Required Inputs

SVG source — a file path or inline SVG content
Icon name — camelCase name for the icon (e.g.,
```
mpGroup
```
,
```
dataFlow
```
)

If the user doesn't provide a name, infer one from the SVG filename or ask.

The Process

Step 1: Prepare the SVG

Read the source SVG
Optimize with svgo:
```
npx svgo <input> -o <output> --pretty
```
Post-optimization fixes:
- Replace
```
fill="black"
```
  or
```
fill="none"
```
  on the root
```
<svg>
```
  with
```
fill="currentColor"
```
  (enables theming)
- Remove explicit
```
width
```
  and
```
height
```
  attributes — keep only
```
viewBox
```
- Ensure the
```
xmlns
```
  attribute is present

Save to

src/assets/svg/mp_<category>_lt_<kebab-name>.svg

Category conventions:

Category	Prefix	Use for
Action	`act`	Interactive actions (edit, delete, play, filter)
Product module	`pm`	Product areas (analytics, identity, catalog)
Informational	`info`	Status, context, metadata (group, user, help)
Data type	`data`	Data types (string, number, boolean, array)

If unsure, default to

info

Step 2: Import and export in

src/components/icons/index.ts

Add the import (alphabetically among mParticle imports):

import MyNewIcon from 'src/assets/svg/mp_info_lt_my-new.svg?react'

Add to the export block (alphabetically):

export {
  // ...existing exports...
  MyNewIcon,
  // ...
}

Step 3: Register in

src/constants/Icons.ts

Add the import from

src/components/icons

import {
  // ...existing imports...
  MyNewIcon,
} from 'src/components/icons'

Add the icon entry (alphabetically by key):

myNew: {
  light: MyNewIcon,
  default: 'light',
},

Step 4: Add to

src/types/icons.ts

Add the name to the

IconNames

union (alphabetically):

export type IconNames =
  // ...
  'myNew'
// ...

Step 5: Verify

npm run build
npx tsc --noEmit

Both must pass before committing.

Naming Conventions

SVG filename:

mp_<category>_lt_<kebab-case-name>.svg

(e.g.,

mp_info_lt_mp-group.svg

)

Import variable: PascalCase ending in
```
Icon
```
(e.g.,
```
MpGroupIcon
```
)
Icon name key: camelCase matching the user's requested name (e.g.,
```
mpGroup
```
)
IconNames type: same camelCase string (e.g.,
```
'mpGroup'
```
)

Duo-tone Variants

If the user provides both light and duo-tone SVGs:

Name the duo-tone file
```
mp_<category>_dt_<kebab-name>.svg
```
Import as
```
MyNewIconDt
```
Register both variants:

myNew: {
  light: MyNewIcon,
  'duo-tone': MyNewIconDt,
  default: 'light',
},

Constraints

DO run svgo to optimize every SVG before committing
DO use
```
fill="currentColor"
```
on the root
```
<svg>
```
element
DO remove explicit
```
width
```
/
```
height
```
— only keep
```
viewBox
```
DO verify build and tsc pass after registration
DO NOT add to docs manually — the
```
IconTable
```
story auto-discovers icons from the
```
Icons
```
map
DO NOT add mParticle SVG icons to
```
src/components/index.ts
```
Rokt exports section
DO NOT forget any of the 4 registration files

Reference Files

SVG assets:
```
src/assets/svg/
```
Icon imports/exports:
```
src/components/icons/index.ts
```
Icon map:
```
src/constants/Icons.ts
```
Icon types:
```
src/types/icons.ts
```
Icon component:
```
src/components/general/Icon/Icon.tsx
```
Rokt icons guide:
```
.cursor/rules/add-untitled-ui-icon.mdc
```