xref: /expo/docs/ui/components/DocIcons/IconBase.tsx (revision dfd15ebd)
1import { css } from '@emotion/react';
2import { iconSize, spacing, theme } from '@expo/styleguide';
3import * as React from 'react';
4
5export type DocIconProps = {
6  Icon?: React.ElementType;
7  color?: string;
8  small?: boolean;
9};
10
11export const IconBase = ({ color, small, Icon }: DocIconProps) => {
12  if (!Icon) return null;
13
14  return (
15    <Icon
16      css={iconStyles}
17      color={color ?? theme.icon.default}
18      size={small ? iconSize.small : iconSize.regular}
19    />
20  );
21};
22
23const iconStyles = css({
24  'table &, li &': {
25    verticalAlign: 'middle',
26  },
27
28  'li &': {
29    marginTop: -spacing[0.5],
30  },
31});
32