getIconColorToken

The getIconColorToken utility function maps a given variant (such as primary, negative, etc.) to its corresponding icon color token from the design system. This ensures that icons always use the correct color for their variant, providing consistent icon coloring across all components by referencing the right color tokens.

Import

import { getIconColorToken } from '@contentful/f36-utils';

Example

Shared and Per-Component Usage

import { getIconColorToken, iconColorByVariant } from '@contentful/f36-utils';
// Shared usage (universal variants)
const color = getIconColorToken('primary', iconColorByVariant); // returns 'colorPrimary'
// Per-component override (e.g. Button)
const buttonIconColorByVariant = {
...iconColorByVariant,
primary: 'colorWhite', // Button-specific override
};
const buttonColor = getIconColorToken('primary', buttonIconColorByVariant); // returns 'colorWhite'
// The mapping object can be partial or custom for each component.

Help improve this page