These are all the files from the Tabler react repos, made to work with laravel and webpack.

2025-10-07 05:14:52 +00:00 · 2019-01-04 17:03:16 +01:00
parent 961e7e92b3
commit 40028c8be7
94 changed files with 51417 additions and 3 deletions
--- a/resources/js/components/IconPage.react.js
+++ b/resources/js/components/IconPage.react.js
@@ -0,0 +1,92 @@
+// @flow
+
+import * as React from "react";
+
+import { Page, Grid, Card, Icon } from "tabler-react";
+
+import faIcons from "../data/icons/fa";
+import feIcons from "../data/icons/fe";
+import flagIcons from "../data/icons/flag";
+import paymentIcons from "../data/icons/payment";
+import SiteWrapper from "../SiteWrapper.react";
+
+const iconSets: Array<{
+  prefix: "fa" | "fe" | "flag" | "payment",
+  title: string,
+  icons: Array<string>,
+  description?: string,
+  link?: string,
+}> = [
+  {
+    prefix: "fe",
+    title: "Feather Icons",
+    icons: feIcons,
+    description: "Simply beautiful open source icons.",
+    link: "https://feathericons.com",
+  },
+  {
+    prefix: "fa",
+    title: "Font Awesome",
+    icons: faIcons,
+    description: "Powered by Font Awesome set.",
+    link: "http://fontawesome.io",
+  },
+  { prefix: "flag", title: "Flags", icons: flagIcons },
+  { prefix: "payment", title: "Payments", icons: paymentIcons },
+];
+
+function IconPage(): React.Node {
+  return (
+    <SiteWrapper>
+      <Page.Content title="Icons">
+        {iconSets.map(iconSet => (
+          <Card key={iconSet.prefix}>
+            <Card.Header>
+              <Card.Title>{iconSet.title}</Card.Title>
+            </Card.Header>
+            <Card.Body>
+              <Grid.Row>
+                <Grid.Col lg={3}>
+                  <p>
+                    {iconSet.description}
+                    {iconSet.link && (
+                      <span>
+                        {" "}
+                        For more info{" "}
+                        <a
+                          href={iconSet.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          click here
+                        </a>.
+                      </span>
+                    )}
+                  </p>
+                  <p>
+                    <code>{`<Icon prefix="${
+                      iconSet.prefix
+                    }" name="ICON_NAME" />`}</code>
+                  </p>
+                </Grid.Col>
+                <Grid.Col lg={9}>
+                  <div className="icons-list-wrap">
+                    <ul className="icons-list">
+                      {iconSet.icons.map(icon => (
+                        <li className="icons-list-item" key={icon}>
+                          <Icon prefix={iconSet.prefix} name={icon} />
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </Grid.Col>
+              </Grid.Row>
+            </Card.Body>
+          </Card>
+        ))}
+      </Page.Content>
+    </SiteWrapper>
+  );
+}
+
+export default IconPage;