Merge branch 'dev' of https://github.com/tabler/tabler-icons

 Conflicts:

	packages/icons-preact/test.spec.jsx

	packages/icons/package.json

	pnpm-lock.yaml

package.json

@@ -48,6 +48,7 @@
     "zip": "node ./.build/zip-files.mjs"
   },
   "devDependencies": {
+    "@atomico/rollup-plugin-sizes": "^1.1.4",
     "@babel/cli": "^7.20.7",
     "@babel/core": "7.11.6",
     "@babel/parser": "7.11.5",

packages/icons-preact/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "preact"]
+  }

packages/icons-preact/package.json

@@ -32,7 +32,7 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "test": "echo 'ok'"
+    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
   },
   "dependencies": {
     "@tabler/icons": "2.2.0"
@@ -41,12 +41,25 @@
     "preact": "^10.5.13"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.11.5",
     "@preact/preset-vite": "^2.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/preact": "^3.2.2",
     "babel-preset-preact": "^2.0.0",
+    "babel-jest": "^29.4.1",
     "jest": "^29.3.1",
-    "preact": "^10.11.3",
+    "jest-environment-jsdom": "^29.4.1",
-    "vitest": "^0.26.3"
+    "preact": "^10.11.3"
+  },
+  "jest": {
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "node",
+        "node-addons"
+      ]
+    },    
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
   }  
 }

packages/icons-preact/test.spec.js

@@ -0,0 +1,29 @@
+import { h } from "preact";
+import { render } from "@testing-library/preact";
+import { Icon2fa } from "./src/icons.js";
+
+describe("Preact Icon component", () => {
+  test("should render icon component", () => {
+    const { container } = render(<Icon2fa />);
+    expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
+  });
+
+  test("should update svg attributes when there are props passed to the component", () => {
+    const { container } = render(
+      <Icon2fa size={48} color={"red"} strokeWidth={4} />
+    );
+
+    const svg = container.getElementsByTagName("svg")[0];
+
+    expect(svg.getAttribute("width")).toBe("48");
+    expect(svg.getAttribute("stroke")).toBe("red");
+    expect(svg.getAttribute("stroke-width")).toBe("4");
+  });
+
+  test("should match snapshot", () => {
+    const { container } = render(<Icon2fa />);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-2fa\\"><path d=\\"M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0\\"></path></svg>"`
+    );
+  });
+});

packages/icons-preact/test.spec.jsx

@@ -1,37 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import Preact from 'preact'
-import { render } from "@testing-library/preact"
-import { IconActivity } from "@tabler/icons-preact"
-
-describe("Preact Icon component", () => {
-  it("should render an component", () => {
-    const { container } = render(<IconActivity />);
-
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-IconActivity\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
-    );
-  });
-
-  it("should adjust the size, stroke color and stroke width", () => {
-    const testId = "icon";
-    const { container, getByTestId } = render(
-      <IconActivity
-        data-testid={testId}
-        size={48}
-        color="red"
-        stroke={4}
-        className={"icon-class"}
-      />
-    );
-
-    const { attributes } = getByTestId(testId);
-    expect(attributes.stroke.value).toBe("red");
-    expect(attributes.width.value).toBe("48");
-    expect(attributes.height.value).toBe("48");
-    expect(attributes["stroke-width"].value).toBe("4");
-
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"icon-class\\" data-testid=\\"icon\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
-    );
-  });
-});

packages/icons-react/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }

packages/icons-react/__snapshots__/test.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`React Icon component should match snapshot 1`] = `
+<svg
+  className="tabler-icon tabler-icon-2fa"
+  fill="none"
+  height={24}
+  stroke="currentColor"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={2}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"
+  />
+</svg>
+`;

packages/icons-react/package.json

@@ -32,21 +32,30 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "test": "echo 'ok'"
+    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
   },
   "dependencies": {
     "@tabler/icons": "2.2.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.11.5",
+    "@babel/preset-react": "7.10.4",
     "@testing-library/react": "^11.2.6",
-    "babel-preset-react-app": "^10.0.0",
+    "babel-jest": "^29.4.1",
-    "jest": "^26.6.3",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2"
   },
   "peerDependencies": {
     "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
   }
 }

packages/icons-react/test.spec.js

@@ -1,36 +1,27 @@
-import React from "react";
+import { render } from "@testing-library/react"
-import { render } from "@testing-library/react";
+import { Icon2fa } from "./src/icons.js"
-import { IconActivity } from "@tabler/icons-react";
+import React from "react"
+import renderer from 'react-test-renderer'
 
 describe("React Icon component", () => {
-  it("should render an component", () => {
+  test("should render icon component", () => {
-    const { container } = render(<IconActivity />);
+    const { container } = render(<Icon2fa/>)
+    expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0)
+  })
 
-    expect(container.innerHTML).toMatchInlineSnapshot(
+  test("should update svg attributes when there are props passed to the component", () => {
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-IconActivity\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
+    const { container } = render(<Icon2fa size={48} color={"red"} strokeWidth={4}/>)
-    );
-  });
 
-  it("should adjust the size, stroke color and stroke width", () => {
+    const svg = container.getElementsByTagName("svg")[0]
-    const testId = "icon";
-    const { container, getByTestId } = render(
-      <IconActivity
-        data-testid={testId}
-        size={48}
-        stroke="red"
-        strokeWidth={4}
-        className={"icon-class"}
-      />
-    );
 
-    const { attributes } = getByTestId(testId);
+    expect(svg.getAttribute("width")).toBe("48")
-    expect(attributes.stroke.value).toBe("red");
+    expect(svg.getAttribute("stroke")).toBe("red")
-    expect(attributes.width.value).toBe("48");
+    expect(svg.getAttribute("stroke-width")).toBe("4")
-    expect(attributes.height.value).toBe("48");
+  })
-    expect(attributes["stroke-width"].value).toBe("4");
 
-    expect(container.innerHTML).toMatchInlineSnapshot(
+  // Jest creates separate file to store snapshots
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"icon-class\\" data-testid=\\"icon\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
+  test("should match snapshot", () => {
-    );
+    const icon = renderer.create(<Icon2fa/>).toJSON()
-  });
+    expect(icon).toMatchSnapshot()
-});
+  })
+})

packages/icons-solidjs/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "solid"]
+  }

packages/icons-solidjs/package.json

@@ -32,16 +32,23 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "test": "echo 'ok'"
+    "test": "echo 'TODO'"
   },
   "dependencies": {
     "@tabler/icons": "2.2.0"
   },
   "devDependencies": {
+    "@solidjs/testing-library": "^0.6.1",
+    "babel-jest": "^29.4.1",
     "babel-preset-solid": "^1.5.4",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "solid-js": "^1.4.7"
   },
   "peerDependencies": {
     "solid-js": "^1.4.7"
+  },
+  "transform": {
+    "^.+\\.js$": "babel-jest"
   }
 }

packages/icons-solidjs/test.spec.js

@@ -0,0 +1,30 @@
+// import { render } from "@solidjs/testing-library"
+// import { Icon2fa } from "./src/icons.js"
+
+// describe("Solidjs Icon component", () => {
+//   test("should render icon component", () => {
+//     const { container } = render(<Icon2fa />)
+//     expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
+//   })
+
+//   test("should update svg attributes when there are props passed to the component", () => {
+//     const { container } = render(Icon2fa, {
+//       props: {
+//         size: 48,
+//         color: "red",
+//         "stroke-width": 4,
+//       },
+//     })
+
+//     const svg = container.getElementsByTagName("svg")[0]
+
+//     expect(svg.getAttribute("width")).toBe("48")
+//     expect(svg.getAttribute("stroke")).toBe("red")
+//     expect(svg.getAttribute("stroke-width")).toBe("4")
+//   })
+
+//   test("should match snapshot", () => {
+//     const { container } = render(<Icon2fa />)
+//     expect(container.innerHTML).toMatchInlineSnapshot()
+//   })
+// })

packages/icons-svelte/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

packages/icons-svelte/package.json

@@ -33,25 +33,32 @@
     "build:strip": "svelte-strip strip src/ dist/svelte",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.svelte",
-    "test": "echo 'ok'"
+    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
   },
   "dependencies": {
     "@tabler/icons": "2.2.0"
   },
   "devDependencies": {
-    "jest": "^28.1.3",
-    "rollup-plugin-svelte": "^7.1.0",
-    "@tsconfig/svelte": "^3.0.0",
-    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/svelte": "^3.0.3",
-    "jsdom": "^20.0.3",
+    "@tsconfig/svelte": "^3.0.0",
+    "babel-jest": "^29.4.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "rollup-plugin-svelte": "^7.1.0",
     "svelte": "^3.53.1",
     "svelte-check": "^2.9.2",
+    "svelte-jester": "^2.3.2",
     "svelte-preprocess": "^4.10.7",
     "svelte-strip": "^1.0.3",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "svelte": "^3.49.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.svelte$": "svelte-jester"
+    }
   }
 }

packages/icons-svelte/test.spec.js

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/svelte";
+import { Icon2fa } from "./src/icons.js";
+
+describe("Svelte Icon component", () => {
+  test("should render icon component", () => {
+    const { container } = render(Icon2fa);
+    expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
+  });
+
+  test("should update svg attributes when there are props passed to the component", () => {
+    const { container } = render(Icon2fa, {
+      size: 48,
+      color: "red",
+      strokeWidth: 4,
+    });
+
+    const svg = container.getElementsByTagName("svg")[0];
+
+    expect(svg.getAttribute("width")).toBe("48");
+    expect(svg.getAttribute("stroke")).toBe("red");
+    expect(svg.getAttribute("stroke-width")).toBe("4");
+  });
+
+  test("should match snapshot", () => {
+    const { container } = render(Icon2fa);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa "><path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"></path></svg></div>"`
+    );
+  });
+});

packages/icons-vue/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+  }

packages/icons-vue/package.json

@@ -32,7 +32,7 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "test": "echo 'ok'"
+    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
   },
   "dependencies": {
     "@tabler/icons": "2.2.0"
@@ -41,10 +41,28 @@
     "vue": ">=3.0.1"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.11.5",
     "@testing-library/vue": "^6.6.1",
     "@vue/compiler-sfc": "^3.2.45",
     "@vue/test-utils": "^2.2.4",
+    "babel-jest": "^29.4.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "jest-serializer-vue": "^3.1.0",
     "vue": "^3.2.45",
     "vue-jest": "^5.0.0-alpha.10"
+  },
+  "jest": {
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "node",
+        "node-addons"
+      ]
+    },
+    "snapshotSerializers": ["jest-serializer-vue"],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue-jest"
+    }
   }
 }

packages/icons-vue/src/tabler-icons-vue.js

@@ -1,2 +1,2 @@
 export * from './icons';
-export { default as createReactComponent } from './createVueComponent';
+export { default as createVueComponent } from './createVueComponent';

packages/icons-vue/test.spec.js

@@ -1,101 +1,34 @@
-import { render, fireEvent } from "@testing-library/vue";
+import { render } from "@testing-library/vue"
-import { IconActivity } from "./";
+import { Icon2fa } from "./src/icons.js"
 
 describe("Vue Icon component", () => {
-  it("should render an component", () => {
+  test("should render icon component", () => {
-    const { container } = render(IconActivity);
+    const { container } = render(Icon2fa)
-    expect(container.innerHTML).toMatchInlineSnapshot(
+    expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-activity\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
+  })
-    );
-  });
 
-  it("should adjust the size, stroke color and stroke width", () => {
+  test("should update svg attributes when there are props passed to the component", () => {
-    const { container } = render(IconActivity, {
+    const { container } = render(Icon2fa, {
       props: {
         size: 48,
         color: "red",
         "stroke-width": 4,
       },
-    });
+    })
 
-    const [icon] = container.getElementsByTagName('svg')
+    const svg = container.getElementsByTagName("svg")[0]
 
-    expect(icon.getAttribute("width")).toBe("48");
+    expect(svg.getAttribute("width")).toBe("48")
-    expect(icon.getAttribute("stroke")).toBe("red");
+    expect(svg.getAttribute("stroke")).toBe("red")
-    expect(icon.getAttribute("stroke-width")).toBe("4");
+    expect(svg.getAttribute("stroke-width")).toBe("4")
+  })
 
-    expect(container.innerHTML).toMatchInlineSnapshot(
+  test("should match snapshot", () => {
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" size=\\"48\\" color=\\"red\\" class=\\"tabler-icon tabler-icon-activity\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
+    const { container } = render(Icon2fa);
-    );
+    expect(container.innerHTML).toMatchInlineSnapshot(`
-  });
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa">
-
+        <path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"></path>
-  it("should add a class to the element", () => {
-    const { container } = render(IconActivity, {
-      attrs: {
-        class: "my-icon",
-      },
-    });
-
-    expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"my-icon\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
-    );
-
-    const [icon] = container.getElementsByTagName('svg')
-
-    expect(icon.getAttribute("class")).toBe("my-icon");
-  });
-
-  it("should add a style attribute to the element", () => {
-    const { container } = render(IconActivity, {
-      attrs: {
-        style: "position: absolute",
-      },
-    });
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <svg
-          class="tabler-icon tabler-icon-activity"
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          style="position: absolute;"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 0h24v24H0z"
-            fill="none"
-            stroke="none"
-          />
-          <path
-            d="M3 12h4l3 8l4 -16l3 8h4"
-          />
       </svg>
-      </div>
+    `)
-    `);
+  })
-
+})
-    const [icon] = container.getElementsByTagName('svg')
-
-    expect(icon.getAttribute("style")).toBe("position: absolute;");
-  });
-
-  it("should call the onClick event", async () => {
-    const onClick = jest.fn();
-    const { container } = render(IconActivity, {
-      attrs: {
-        onClick,
-      },
-    });
-
-    const [icon] = container.getElementsByClassName("tabler-icon");
-
-    await fireEvent.click(icon);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-});

packages/icons/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+  }

packages/icons/package.json

@@ -10,6 +10,9 @@
   },
   "main": "dist/cjs/tabler-icons.js",
   "main:umd": "dist/umd/tabler-icons.js",
+  "exports": {
+    "./*": ["./icons/*"]
+  },
   "module": "dist/esm/tabler-icons.js",
   "unpkg": "dist/umd/tabler-icons.min.js",
   "typings": "dist/tabler-icons.d.ts",
@@ -40,7 +43,7 @@
     "copy:tags": "cp ../../tags.json tags.json",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf src/icons/*.js && rm -rf icons",
-    "test": "echo 'ok'"
+    "test": "jest --env=jsdom"
   },
   "keywords": [
     "icons",
@@ -50,5 +53,21 @@
     "react",
     "front-end",
     "web"
+  ],
+  "devDependencies": {
+    "babel-jest": "^29.4.1",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1"
+  },
+  "jest": {
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "node",
+        "node-addons"
       ]
+    },
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  }
 }

packages/icons/test.spec.js

@@ -0,0 +1,25 @@
+import fs from 'fs'
+import path from 'path'
+
+describe('SVGIcon', () => {
+  let container
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.innerHTML = ''
+    document.body.removeChild(container)
+  })
+  
+  test('renders the correct class and XML namespace', () => {
+    container.innerHTML = fs.readFileSync(path.join('./icons', '2fa.svg'), 'utf-8')
+    const svg = container.querySelector('svg')
+
+    expect(svg.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg')
+    expect(svg.classList.contains('icon')).toBe(true)
+    expect(svg.classList.contains('icon-tabler')).toBe(true)
+  })
+})