Prism Docs

import { Icon } from '@mylighthouse/prism-react';

export default function IconDefault(): React.JSX.Element {
  return (
    <>
      <Icon name="search" />
      <Icon name="heart-filled" />
      <Icon name="chevron-right" />
      <Icon name="plus" />
    </>
  );
}

import { Icon } from '@mylighthouse/prism-react';

export default function IconSizes(): React.JSX.Element {
  return (
    <div className="flex gap-300 items-center">
      <div className="flex flex-col items-center gap-100">
        <Icon name="search" size="extra-small" />
        <span className="text-200--regular">extra-small</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon name="heart-filled" size="small" />
        <span className="text-200--regular">small</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon name="chevron-right" size="medium" />
        <span className="text-200--regular">medium</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon name="plus" size="large" />
        <span className="text-200--regular">large</span>
      </div>
    </div>
  );
}

import { Icon } from '@mylighthouse/prism-react';

export default function IconColors(): React.JSX.Element {
  return (
    <div className="flex gap-300 flex-wrap">
      <div className="flex flex-col items-center gap-100">
        <Icon color="default" name="search" />
        <span className="text-200--regular">default</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="default-inverse" name="heart-filled" />
        <span className="text-200--regular">default-inverse</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="emphasis" name="chevron-right" />
        <span className="text-200--regular">emphasis</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="subdued" name="plus" />
        <span className="text-200--regular">subdued</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="info" name="comment-filled" />
        <span className="text-200--regular">info</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="success" name="flag" />
        <span className="text-200--regular">success</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="warning" name="image-filled" />
        <span className="text-200--regular">warning</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="critical" name="location-pin" />
        <span className="text-200--regular">critical</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="intelligence" name="lock" />
        <span className="text-200--regular">intelligence</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="brand" name="rates-lowest" />
        <span className="text-200--regular">brand</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-info" name="mail" />
        <span className="text-200--regular">on-info</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-success" name="notification" />
        <span className="text-200--regular">on-success</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-warning" name="send" />
        <span className="text-200--regular">on-warning</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-critical" name="shopping-cart" />
        <span className="text-200--regular">on-critical</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-intelligence" name="star-filled" />
        <span className="text-200--regular">on-intelligence</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="on-brand" name="thumbs-up-filled" />
        <span className="text-200--regular">on-brand</span>
      </div>
      <div className="flex flex-col items-center gap-100">
        <Icon color="disabled" name="user" />
        <span className="text-200--regular">disabled</span>
      </div>
    </div>
  );
}