@baseline-ui/icons 0.1.0

package/dist/index.mjs

@@ -0,0 +1,77 @@
+// src/Icon.tsx
+import * as Dompurify from "dompurify";
+import React from "react";
+import { useId } from "react-aria";
+import { classNames, invariant } from "@baseline-ui/utils";
+
+// src/Icon.css.ts
+var iconWrapper = "Icon_iconWrapper__1rl8ope0";
+
+// src/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+var setSizeAttributes = (svgElement, size) => {
+  svgElement.setAttribute(
+    "height",
+    typeof size === "number" ? `${size}px` : size
+  );
+  svgElement.setAttribute(
+    "width",
+    typeof size === "number" ? `${size}px` : size
+  );
+};
+var updateSvgTitle = (svgElement, title, id) => {
+  const titleElement = svgElement.querySelector("title");
+  if (titleElement) {
+    titleElement.textContent = title;
+    titleElement.setAttribute("id", id);
+  } else {
+    const newTitleElement = document.createElement("title");
+    newTitleElement.textContent = title;
+    newTitleElement.setAttribute("id", id);
+    svgElement.prepend(newTitleElement);
+  }
+};
+var setClassName = (svgElement, className) => {
+  if (className) {
+    svgElement.classList.add(className);
+  }
+};
+var getSanitizedSvgElement = (_svg) => {
+  const span = document.createElement("span");
+  span.innerHTML = Dompurify.default.sanitize(_svg);
+  const svgElement = span.querySelector("svg");
+  invariant(svgElement, "Icon: svg prop must be a valid svg string");
+  return svgElement;
+};
+var Icon = React.forwardRef(
+  ({ size, title, className, style, ...rest }, ref) => {
+    const id = useId();
+    const _svg = "svg" in rest ? rest.svg : void 0;
+    const svgString = React.useMemo(() => {
+      if (_svg) {
+        const svgElement = getSanitizedSvgElement(_svg);
+        if (size) {
+          setSizeAttributes(svgElement, size);
+        }
+        if (title) {
+          updateSvgTitle(svgElement, title, id);
+        }
+        setClassName(svgElement, className);
+        return svgElement.outerHTML;
+      }
+    }, [_svg, size, title, className, id]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classNames(iconWrapper, className),
+        ref,
+        style,
+        dangerouslySetInnerHTML: svgString ? { __html: svgString } : void 0
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+export {
+  Icon
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@baseline-ui/icons",
+  "version": "0.1.0",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "source": "./src/index.ts",
+  "files": [
+    "dist",
+    "8",
+    "12",
+    "16",
+    "20",
+    "24"
+  ],
+  "license": "ISC",
+  "dependencies": {
+    "@baseline-ui/utils": "*",
+    "dompurify": "^3.0.6",
+    "react-aria": "^3.30.0"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/dompurify": "^3.0.5",
+    "just-kebab-case": "^4.2.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:icons": "./scripts/buildIcons.sh && eslint src --fix"
+  }
+}