Skip to main content

DiaryCard.TaskIcon

The DiaryCard.TaskIcon component displays a measurement type icon. It is inherited from the Tile module's TaskIcon and exposed on DiaryCard for convenience.

Basic Example​

import { MeasurementTypeKey } from "@ovok/core";
import { DiaryCard } from "@ovok/native";
import * as React from "react";

const BasicDiaryCardTaskIconExample = () => {
  return (
    <DiaryCard.TaskIcon measurementTypeKey={MeasurementTypeKey.bodyWeight} />
  );
};

export default BasicDiaryCardTaskIconExample;

Props​

The public TaskIconProps type is exported from @ovok/native. The current renderer accepts the documented values but does not forward arbitrary SVG props or style to SvgXml.

Primary Props​

PropTypeDefaultDescription
measurementTypeKeyMeasurementTypeKeyrequiredKey of the measurement type to render
sizenumber20Icon size in px
colorstringtheme.colors.primaryIcon color
styleSvgXml styleundefinedAccepted by the public type; the current renderer does not forward it to SvgXml
testIDstringundefinedTest identifier

Styling​

Theme Colors Used​

  • theme.colors.primary - Default icon color when color is not provided

If the measurement key has no bundled SVG mapping, the component returns null; it does not render a generic placeholder. The core key used for the urine-analysis icon is MeasurementTypeKey.uricAcid; a separate urineAnalysis name is not mapped and will therefore render nothing.