Repository: motion-canvas/motion-canvas
File: packages/2d/src/components/Icon.ts (TypeScript)

Code before:
import {SignalValue, SimpleSignal} from '@motion-canvas/core/lib/signals';
import {useLogger} from '@motion-canvas/core/lib/utils';
import {ColorSignal} from '@motion-canvas/core/lib/types';

export interface IconProps extends ImageProps {
  /**
   * Expects an Icon Identifier.
   * You can find identifiers on [Icônes](https://icones.js.org/collection/all).
   * They can look like this:
   * * mdi:language-typescript
   * * ph:anchor-simple-bold
   * * ph:activity-bold
   */
  icon: SignalValue<string>;

  /**
   * Color of the Icon. Defaults to white.
   * Provide the color in one of the following formats:
   * * named color like `red`, `darkgray`, …
   * * hexadecimal string with # `#bada55`,`#141414`
   * Values can be either RGB or RGBA: `#bada55` or `#bada55aa` (latter is partially transparent)
   * The shorthand version (e.g. `#abc` for `#aabbcc`) is also possible
   */
  color?: SignalValue<string>;
}

/**
 * An Icon Component that provides an easy access to over 150k icons.
 * See https://icones.js.org/collection/all for all available Icons.
 */
export class Icon extends Image {
  /**
   * Expects an Icon Identifier.
   * You can find identifiers on [Icônes](https://icones.js.org).
   * They can look like this:
   * * mdi:language-typescript
   * * ph:anchor-simple-bold
   * * ph:activity-bold
   */
  @signal()
  public declare icon: SimpleSignal<string, this>;

  /**
   * Color of the Icon. Defaults to white.
   * Provide the color in one of the following formats:
   * * named color like `red`, `darkgray`, …
   * * hexadecimal string with # `#bada55`,`#141414`
   * Values can be either RGB or RGBA: `#bada55` or `#bada55aa` (latter is partially transparent)
   * The shorthand version (e.g. `#abc` for `#aabbcc`) is also possible
   */
  @initial('white')

Review comment (suggestion):
The header should simply state what the property is and remarks should be in their own section:
```suggestion
   * The identifier of the icon.
   *
   * @remarks
   * You can find identifiers on [Icônes](https://icones.js.org).
```

Code after:
import {SignalValue, SimpleSignal} from '@motion-canvas/core/lib/signals';
import {useLogger} from '@motion-canvas/core/lib/utils';
import {ColorSignal, PossibleColor} from '@motion-canvas/core/lib/types';

export interface IconProps extends ImageProps {
  /**
   * {@inheritDoc Icon.icon}
   */
  icon: SignalValue<string>;

  /**
   * {@inheritDoc Icon.color}
   */
  color?: SignalValue<PossibleColor>;
}

/**
 * An Icon Component that provides an easy access to over 150k icons.
 * See https://icones.js.org/collection/all for all available Icons.
 */
export class Icon extends Image {
  /**
   * The identifier of the icon.
   *
   * @remarks
   * You can find identifiers on [Icônes](https://icones.js.org).
   * They can look like this:
   * * `mdi:language-typescript`
   * * `ph:anchor-simple-bold`
   * * `ph:activity-bold`
   */
  @signal()
  public declare icon: SimpleSignal<string, this>;

  /**
   * The color of the icon
   *
   * @remarks
   * Provide the color in one of the following formats:
   * * named color like `red`, `darkgray`, …
   * * hexadecimal string with # like `#bada55`, `#141414`
   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
   *
   * @default 'white'
   */
  @initial('white')
  @colorSignal()
  public declare color: ColorSignal<this>;

  public constructor(props: IconProps) {