Icons

vtz add @vertz/icons

import { SearchIcon, SettingsIcon, UserIcon } from '@vertz/icons';

export function Toolbar() {
  return (
    <nav className={styles.toolbar}>
      <button>
        <SearchIcon /> Search
      </button>
      <button>
        <SettingsIcon /> Settings
      </button>
      <button>
        <UserIcon /> Profile
      </button>
    </nav>
  );
}

import { GithubIcon, ExternalLinkIcon } from '@vertz/icons';

{
  /* Default size (16px) */
}
<GithubIcon />;

{
  /* Custom size */
}
<GithubIcon size={24} />;

{
  /* With a CSS class */
}
<ExternalLinkIcon className={styles.icon} />;

import { css, token } from '@vertz/ui';
import { AlertCircleIcon, CheckCircleIcon } from '@vertz/icons';

const styles = css({
  error: {
    color: token.color.danger[500],
    display: 'flex',
    alignItems: 'center',
    gap: token.spacing[2],
  },
  success: {
    color: token.color.success[600],
    display: 'flex',
    alignItems: 'center',
    gap: token.spacing[2],
  },
});

function StatusMessage({ type, message }: StatusMessageProps) {
  return type === 'error' ? (
    <div className={styles.error}>
      <AlertCircleIcon size={20} />
      <span>{message}</span>
    </div>
  ) : (
    <div className={styles.success}>
      <CheckCircleIcon size={20} />
      <span>{message}</span>
    </div>
  );
}