Document Icon

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

Prop	Type	Default
color	"gray""pink""purple""blue""cyan""green""yellow"	"gray"
icon	IconDefinition
logo	{ name: string, src: string }
size	"xs""sm""md""lg""xl""2xl"	"lg"

DocumentPageIcon

Prop	Type	Default
size	"xs""sm""md""lg""xl""2xl"	"lg"