Document Icon

Represent a Scribe or a Page.

Usage

import { DocumentIcon, DocumentPageIcon } from "stylus-ui/DocumentIcon";
import { getFavicon } from "stylus-ui/utils";
import { faHandshake } from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentIcon icon={faHandshake} />
    <DocumentIcon
      logo={{
        name: "Notion",
        src: getFavicon({ url: "figma.com" }),
      }}
    />
    <DocumentPageIcon />
  </div>
);

Icons

To display an icon, pass an import from @fortawesome/pro-duotone-svg-icons to the icon prop.

import { DocumentIcon } from "stylus-ui/DocumentIcon";
import { faHandshake } from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentIcon icon={faHandshake} />
  </div>
);

Logos

To display a logo, pass a logo object componsed of a name and image src. You can import the getFavicon helper from stylus-ui/utils to assist with this.

import { DocumentIcon } from "stylus-ui/DocumentIcon";
import { getFavicon } from "stylus-ui/utils";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentIcon
      logo={{
        name: "Scribe",
        src: getFavicon({ url: "scribehow.com" }),
      }}
    />
    <DocumentIcon
      logo={{
        name: "Notion",
        src: getFavicon({ url: "notion.so" }),
      }}
    />
    <DocumentIcon
      logo={{
        name: "Figma",
        src: getFavicon({ url: "figma.com" }),
      }}
    />
  </div>
);

Sizes

Sizes range from xs to 2xl. For legibility, the smallest size does not include a container or drop shadow.

import { DocumentIcon } from "stylus-ui/DocumentIcon";
import { faHandshake } from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentIcon icon={faHandshake} size="xs" />
    <DocumentIcon icon={faHandshake} size="sm" />
    <DocumentIcon icon={faHandshake} size="md" />
    <DocumentIcon icon={faHandshake} size="lg" />
    <DocumentIcon icon={faHandshake} size="xl" />
    <DocumentIcon icon={faHandshake} size="2xl" />
  </div>
);

Colors

When passing in an icon, the color may also be set.

import { DocumentIcon } from "stylus-ui/DocumentIcon";
import {
  faCalendarDays,
  faCameraRetro,
  faEarthAmericas,
  faHandshake,
  faInboxFull,
  faRocketLaunch,
  faScaleBalanced,
} from "@fortawesome/pro-duotone-svg-icons";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentIcon icon={faHandshake} color="gray" />
    <DocumentIcon icon={faEarthAmericas} color="green" />
    <DocumentIcon icon={faRocketLaunch} color="pink" />
    <DocumentIcon icon={faScaleBalanced} color="purple" />
    <DocumentIcon icon={faInboxFull} color="blue" />
    <DocumentIcon icon={faCameraRetro} color="cyan" />
    <DocumentIcon icon={faCalendarDays} color="yellow" />
  </div>
);

Page Icons

To display an icon representing a Page, import DocumentPageIcon.

import { DocumentPageIcon } from "stylus-ui/DocumentIcon";

export default () => (
  <div className="flex items-center gap-4">
    <DocumentPageIcon size="xs" />
    <DocumentPageIcon size="sm" />
    <DocumentPageIcon size="md" />
    <DocumentPageIcon size="lg" />
    <DocumentPageIcon size="xl" />
    <DocumentPageIcon size="2xl" />
  </div>
);

API Reference

`DocumentIcon`

DocumentIcon description

`className`

string

Additional class names for the container.

`color`

Color of the icon.

`icon`

IconDefinition

Provide a FontAwesome icon.

`logo`

{ name: string; src: string; }

Provide a URL to an image.

`size`

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" = "lg"

Size of the icon to render.

`theme`

"light" | "dark"

Color theme.

`DocumentPageIcon`