@gisce/react-ooui 1.1.25 → 1.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.1.25",
+  "version": "1.1.26",
   "files": [
     "dist",
     "src",
@@ -39,7 +39,7 @@
     "@gisce/ooui": "^0.17.12",
     "@gisce/react-formiga-table": "^0.5.0",
     "@monaco-editor/react": "^4.4.5",
-    "@tabler/icons": "^1.96.0",
+    "@tabler/icons-react": "^2.11.0",
     "antd": "^4.12.3",
     "buffer": "^6.0.3",
     "fiber-diagram": "github:gisce/fiber-diagram",

package/src/helpers/iconMapper.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import * as AntIcons from "@ant-design/icons";
-import * as TablerIcons from "@tabler/icons";
+import * as TablerIcons from "@tabler/icons-react";
+import Icon from "@ant-design/icons";
 
 type TablerKey = keyof typeof TablerIcons;
 type AntKey = keyof typeof AntIcons;
@@ -131,7 +132,17 @@ function getIconForKey(key: string) {
 
   const tablerKey: TablerKey = `Icon${IconCamelCase}` as any;
   if (TablerIcons[tablerKey]) {
-    return TablerIcons[tablerKey];
+    const TablerIcon = () =>
+      React.createElement(TablerIcons[tablerKey] as any, {
+        fill: "transparent",
+        height: 17,
+        width: 17,
+      });
+    const CustomIcon = () =>
+      React.createElement(Icon, {
+        component: TablerIcon,
+      });
+    return CustomIcon;
   }
 
   return undefined;

package/src/stories/containers/Notebook.stories.tsx

@@ -167,3 +167,30 @@ export const IconTabs = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+
+export const IconTablerTabs = (): React.ReactElement => {
+
+  const arch = `<form>
+    <notebook name="notebook">
+      <page string="Home" icon="bolt">
+        <field name="name" />
+      </page>
+      <page string="Attributes" icon="address-book">
+        <field name="surname" />
+      </page>
+    </notebook>
+  </form>`;
+
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};