@impactsmartsuite/impact-icons

Inline SVG React icon components for Impact Smart Suite. Each icon is a forwardRef component that accepts standard SVG props. Generated monochrome icons use currentColor for fill/stroke so colors are controlled via CSS color.

Accessibility

Icons render with aria-hidden="true" by default, making them invisible to screen readers. This is correct for decorative icons (next to visible text labels, inside buttons with text, etc.).

For meaningful icons that convey information without accompanying text, override the defaults:

// Decorative (default) — hidden from screen readers
<Close />
// equivalent to: <Close aria-hidden="true" />

// Meaningful — visible to screen readers
<Close role="img" aria-label="Close dialog" aria-hidden={undefined} />

Quick start

import { DeleteBlack, CommentGray, Close } from '@impactsmartsuite/impact-icons';

// Color via inline style
<DeleteBlack style={{ color: 'red', width: 20, height: 20 }} />

// Tailwind
<CommentGray className="w-5 h-5 text-gray-500" />

// Ref access
const ref = useRef<SVGSVGElement>(null);
<Close ref={ref} aria-label="Close dialog" role="img" aria-hidden={undefined} />

How icons get here

1. Copy SVGs from the impact-ui repo (primary, recommended)

Ensure you have the correct branch checked out:

git -C ../impact-ui switch develop/impact-v3/test

Then copy SVGs:

node scripts/fetch-svgs.mjs --local-dir ../impact-ui/frontend/src/assets

This copies .svg files into svgs/, skipping:

• Subdirectories like clientLogos/
• Raster-in-SVG files (embedded data:image/png or data:image/jpeg)

2. CDN mode (optional, requires auth)

The DAM listing API requires authentication. Pass the token via environment variable (not CLI arguments, to avoid leaking secrets in shell history):

IMPACT_KIT_AUTH_TOKEN=<token> npm run fetch:svgs -- --cdn

CDN base URL defaults to https://impact-kit.devs.iaproducts.ai. Override with --base-url.

Icon file URLs follow this pattern:

https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/<name>.svg

For most workflows, use --local-dir instead.

Building

npm install

# Generate React components from svgs/ (Phase-1 allowlist — recommended)
npm run generate

# Or generate ALL icons (skip allowlist)
# WARNING: --all may incorrectly convert intentional multi-color SVGs.
# Those icons will have arbitrary fill/stroke values rewritten to currentColor,
# losing their intended colors. Use the Phase-1 allowlist for production.
node scripts/build-icons.mjs --all

# Preview what would be generated
node scripts/build-icons.mjs --dry-run

# Build distributable (ESM + CJS + TypeScript declarations)
npm run build

# Full pipeline: generate + build
npm run build:icons

Output

Generated components live in src/ (git-tracked). The dist/ folder (gitignored) is produced by tsup:

| File | Format | |------|--------| | dist/index.mjs | ESM | | dist/index.js | CJS | | dist/index.d.mts | ESM type declarations | | dist/index.d.ts | CJS type declarations |

currentColor behavior

The SVGR pipeline rewrites only this monochrome theming palette to currentColor:

#000, #000000, #333, #333333, black, #60697D, #60697d, #758490, #798293, #7a8294, #4259ee

All other fill/stroke values from the SVG assets are preserved as-is — including neutrals like #5F6673, semantic colors (error red, success green, warning amber), disabled-state grays, and multi-color icons. Do not expand the rewrite list to cover those; CSS color theming applies only to the palette above.

What stays on CDN

Not all assets in the DAM are converted to React components. These stay as <img> or background-image references:

• Client logos (clientLogos/ subfolder)
• Landing page illustrations and empty-state graphics
• Multi-color brand marks
• Raster-in-SVG files (SVGs containing embedded PNG/JPEG data)
• All .png / .webp assets

// Client logos use the clientLogos/ path, not icons/
<img src="https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/clientLogos/Starboard.svg" />

Adding new icons

1. Place the .svg file in svgs/
2. If using Phase-1 mode (recommended), add the filename stem to PHASE1_ALLOWLIST in scripts/build-icons.mjs
3. Run npm run build:icons
4. Commit the new src/<ComponentName>.tsx and updated src/index.ts

Component API

Every icon component is typed as:

React.ForwardRefExoticComponent<
  Omit<React.SVGProps<SVGSVGElement>, 'ref'> &
  React.RefAttributes<SVGSVGElement>
>

Supported props include className, style, width, height, aria-label, aria-hidden, role, onClick, and all standard SVG attributes.

Filename to component name

Filenames are converted to PascalCase: delete-black.svg becomes DeleteBlack. Known typos are corrected via the NAME_OVERRIDES map in scripts/build-icons.mjs (e.g. keyboardShortuctIcon.svg becomes KeyboardShortcutIcon).

Publishing

This package is scoped to @impactsmartsuite and published with restricted access:

# Authenticate with the npm registry (if not already)
npm login --registry=https://registry.npmjs.org --scope=@impactsmartsuite

# Build and publish
npm run build:icons
npm publish --access restricted

Ensure your .npmrc is configured for the @impactsmartsuite scope if using a private registry:

@impactsmartsuite:registry=https://your-private-registry.example.com/
//your-private-registry.example.com/:_authToken=${NPM_TOKEN}

Testing expectations

When adding tests (e.g. via Vitest + React Testing Library), verify:

• Generated component renders without errors
• viewBox attribute is retained on the root <svg>
• Hardcoded width/height attributes are removed (sizing via CSS/props)
• Expected fill/stroke values (#60697D, #758490, #4259ee, etc.) become currentColor
• aria-hidden="true" is present by default
• Raster-in-SVG files are skipped during generation
• Barrel index.ts exports match the generated component files
• Consumer can override aria-hidden, add role="img" and aria-label