index.tsx

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";

import {
  AlignCenter,
  AlignJustify,
  AlignLeft,
  AlignRight,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  Cancel,
  DragHandle,
  Plus,
  Minus,
  Menu,
  RadioActive,
  RadioInactive,
  IconProvider,
  defaultIconContext,
} from "../src";

const customTheme = { ...defaultIconContext };

customTheme.color = "#00b";
customTheme.size = "8rem";
customTheme.capStyle = "square";
customTheme.strokeWidth = 6;

function Icons() {
  return (
    <div className="Icons">
      <AlignCenter />
      <AlignJustify />
      <AlignLeft />
      <AlignRight />
      <ArrowDown />
      <ArrowLeft />
      <ArrowRight />
      <ArrowUp />
      <Cancel />
      <DragHandle />
      <Plus />
      <Minus />
      <Menu />
      <RadioActive />
      <RadioInactive />
    </div>
  );
}

function Docs() {
  return (
    <div className="Docs">
      <header>
        <h1>picto</h1>
        <p>
          Customizable React icon components. Generated using simple geometry,
          not drawn.
        </p>
        <a href="https://github.com/stephenvector/picto">
          View source on GitHub
        </a>
      </header>

      <IconProvider theme={defaultIconContext}>
        <Icons />
      </IconProvider>

      <div>
        <h2>Installation</h2>
        <pre>
          <code>{`npm install --save @stephenvector/picto@latest`}</code>
        </pre>
      </div>

      <div>
        <h2>Usage</h2>
        <pre>
          <code>
            {`import { AlignCenter } from "@stephenvector/picto";

export default function App() {
  return (
    <div>
      <AlignCenter /> Align Center
    </div>
  )
}
`}
          </code>
        </pre>

        <h2>Customization</h2>
        <pre>
          <code>{`export const defaultIconContext: IconConfig = {
  color: "#000",
  capStyle: "round",
  gridSize: 128,
  size: "1em",
  strokeWidth: 9,
  lineJoin: "round"
};

// Override attributes by creating a customized theme
type IconConfig = {
  capStyle: "round" | "square";
  gridSize: number;
  color: string;
  size: number | string;
  strokeWidth: number;
  lineJoin: "round" | "bevel" | "miter" | "inherit";
};

const customTheme = {...defaultIconContext};

customTheme.color = "#00b";
customTheme.size = "8rem";
customTheme.capStyle = "square";
customTheme.strokeWidth = 6;

<IconProvider theme={customTheme}>
  <AlignCenter />
  <AlignJustify />
  <AlignLeft />
  <AlignRight />
  <ArrowDown />
  <ArrowLeft />
  <ArrowRight />
  <ArrowUp />
  <Cancel />
  <DragHandle />
  <Plus />
  <Minus />
  <Menu />
  <RadioActive />
  <RadioInactive />
</IconProvider>
`}</code>
        </pre>
        <p>
          <strong>Preview:</strong>
        </p>
        <IconProvider theme={customTheme}>
          <AlignCenter />
          <AlignJustify />
          <AlignLeft />
          <AlignRight />
          <ArrowDown />
          <ArrowLeft />
          <ArrowRight />
          <ArrowUp />
          <Cancel />
          <DragHandle />
          <Plus />
          <Minus />
          <Menu />
          <RadioActive />
          <RadioInactive />
        </IconProvider>
      </div>
    </div>
  );
}

const root = document.getElementById("root");
if (root) {
  const reactRoot = createRoot(root);
  reactRoot.render(<Docs />);
}