phosphor-strokes-icons 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# phosphor-strokes-icons
+
+Phosphor stroke icon components for React, packaged with a Lucide-like import model:
+
+- static icon imports for maximum tree-shaking
+- optional by-name API
+- optional dynamic loading API
+
+## Install
+
+```bash
+npm i phosphor-strokes-icons
+```
+
+Peer dependency:
+
+- `react` `^18 || ^19`
+
+## Usage
+
+### 1) Static imports (recommended)
+
+```tsx
+import { Gear, User } from "phosphor-strokes-icons";
+
+export function Example() {
+  return (
+    <div>
+      <Gear size={24} />
+      <User size={20} strokeWidth={1.5} />
+    </div>
+  );
+}
+```
+
+You can also import a single icon subpath:
+
+```tsx
+import { Gear } from "phosphor-strokes-icons/icons/Gear";
+```
+
+### 2) By-name API
+
+```tsx
+import { Icon } from "phosphor-strokes-icons/by-name";
+
+export function Example() {
+  return <Icon name="gear" size={24} />;
+}
+```
+
+### 3) Dynamic loading
+
+```tsx
+import { loadIconByName } from "phosphor-strokes-icons/dynamic";
+
+export async function getIcon() {
+  const IconComponent = await loadIconByName("gear");
+  return IconComponent;
+}
+```
+
+## Props
+
+Each icon component supports standard SVG props plus:
+
+- `size?: string | number`
+- `color?: string`
+- `strokeWidth?: string | number`
+- `absoluteStrokeWidth?: boolean`
+
+Defaults:
+
+- `size = 24`
+- `color = "currentColor"`
+- `strokeWidth = 1.5`
+- `absoluteStrokeWidth = true`
+
+`size` can be number (`px`) or CSS length string (`"1rem"`, `"24px"`).
+
+## Scripts
+
+- `npm run generate` — generate icon components from `src/raw-svg`
+- `npm run check` — TypeScript validation
+- `npm run build` — generate + tsup build
+- `npm run pack:dry` — inspect npm package before publish
+
+## Publish Checklist
+
+1. `npm run check`
+2. `npm run build`
+3. `npm run pack:dry`
+4. `npm login`
+5. `npm publish --access public`

package/dist/by-name.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var by_name_exports = {};
+__export(by_name_exports, {
+  Icon: () => import_icon.Icon,
+  dictionary: () => import_icon_dictionary.dictionary,
+  iconNameMap: () => import_icon_name_map.iconNameMap,
+  iconSizes: () => import_types.iconSizes
+});
+module.exports = __toCommonJS(by_name_exports);
+var import_icon = require("./icon");
+var import_icon_dictionary = require("./icon-dictionary");
+var import_icon_name_map = require("./icon-name-map");
+var import_types = require("./types");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon,
+  dictionary,
+  iconNameMap,
+  iconSizes
+});

package/dist/by-name.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DetailedHTMLProps, HTMLAttributes, SVGProps } from 'react';
+import { IconName, IconSize, StrokeWidth } from './types.cjs';
+export { iconSizes } from './types.cjs';
+export { dictionary } from './icon-dictionary.cjs';
+export { iconNameMap } from './icon-name-map.cjs';
+import './create-icon.cjs';
+
+interface IconProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    name: IconName;
+    classes?: {
+        wrapper?: string;
+        icon?: string;
+    };
+    size?: IconSize | number;
+    strokeWidth?: StrokeWidth;
+    color?: string;
+    absoluteStrokeWidth?: boolean;
+    svgProps?: Omit<SVGProps<SVGSVGElement>, "color" | "size" | "strokeWidth" | "className">;
+}
+declare function Icon({ name, size, strokeWidth, classes, color, absoluteStrokeWidth, svgProps, className, ...rest }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Icon, IconName, type IconProps, IconSize, StrokeWidth };

package/dist/by-name.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DetailedHTMLProps, HTMLAttributes, SVGProps } from 'react';
+import { IconName, IconSize, StrokeWidth } from './types.js';
+export { iconSizes } from './types.js';
+export { dictionary } from './icon-dictionary.js';
+export { iconNameMap } from './icon-name-map.js';
+import './create-icon.js';
+
+interface IconProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    name: IconName;
+    classes?: {
+        wrapper?: string;
+        icon?: string;
+    };
+    size?: IconSize | number;
+    strokeWidth?: StrokeWidth;
+    color?: string;
+    absoluteStrokeWidth?: boolean;
+    svgProps?: Omit<SVGProps<SVGSVGElement>, "color" | "size" | "strokeWidth" | "className">;
+}
+declare function Icon({ name, size, strokeWidth, classes, color, absoluteStrokeWidth, svgProps, className, ...rest }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Icon, IconName, type IconProps, IconSize, StrokeWidth };

package/dist/by-name.js

@@ -0,0 +1,10 @@
+import { Icon } from "./icon";
+import { dictionary } from "./icon-dictionary";
+import { iconNameMap } from "./icon-name-map";
+import { iconSizes } from "./types";
+export {
+  Icon,
+  dictionary,
+  iconNameMap,
+  iconSizes
+};

package/dist/create-icon.cjs

@@ -0,0 +1,132 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var create_icon_exports = {};
+__export(create_icon_exports, {
+  createIcon: () => createIcon
+});
+module.exports = __toCommonJS(create_icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+function joinClassNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function parseLength(value) {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) {
+      return null;
+    }
+    return { value, unit: "" };
+  }
+  const trimmed = value.trim();
+  const match = trimmed.match(/^(-?\d*\.?\d+)([a-z%]*)$/i);
+  if (!match) {
+    return null;
+  }
+  const numericValue = Number(match[1]);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+  return {
+    value: numericValue,
+    unit: (match[2] ?? "").toLowerCase()
+  };
+}
+function resolveStrokeWidth(strokeWidth, size, absoluteStrokeWidth) {
+  if (!absoluteStrokeWidth) {
+    return strokeWidth;
+  }
+  const parsedSize = parseLength(size);
+  const parsedStrokeWidth = parseLength(strokeWidth);
+  if (!parsedSize || parsedSize.value === 0 || !parsedStrokeWidth) {
+    return strokeWidth;
+  }
+  const hasExplicitSizeUnit = parsedSize.unit !== "" && parsedSize.unit !== "px";
+  const hasExplicitStrokeUnit = parsedStrokeWidth.unit !== "" && parsedStrokeWidth.unit !== "px";
+  if (hasExplicitSizeUnit && !hasExplicitStrokeUnit) {
+    return strokeWidth;
+  }
+  if (parsedSize.unit !== "" && parsedStrokeWidth.unit !== "" && parsedSize.unit !== parsedStrokeWidth.unit) {
+    return strokeWidth;
+  }
+  return parsedStrokeWidth.value * 32 / parsedSize.value;
+}
+const IconBase = (0, import_react.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 1.5,
+    absoluteStrokeWidth = true,
+    className,
+    children,
+    iconNode,
+    ...props
+  }, ref) => {
+    const resolvedStrokeWidth = resolveStrokeWidth(
+      strokeWidth,
+      size,
+      absoluteStrokeWidth
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        stroke: color,
+        strokeWidth: resolvedStrokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: joinClassNames("br-icon", className),
+        ...props,
+        children: [
+          iconNode.map(
+            ([elementName, attrs]) => (0, import_react.createElement)(elementName, {
+              key: `${elementName}-${attrs.d}`,
+              ...attrs
+            })
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+IconBase.displayName = "IconBase";
+function createIcon(iconName, iconNode) {
+  const Component = (0, import_react.forwardRef)(
+    ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      IconBase,
+      {
+        ref,
+        iconNode,
+        className: joinClassNames(`br-icon-${iconName}`, className),
+        ...props
+      }
+    )
+  );
+  Component.displayName = iconName;
+  return Component;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createIcon
+});

package/dist/create-icon.d.cts

@@ -0,0 +1,19 @@
+import { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
+
+type SVGElementType = "path";
+type IconNode = readonly [
+    elementName: SVGElementType,
+    attrs: Record<string, string>
+][];
+type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+interface StrokeIconProps extends ElementAttributes {
+    size?: string | number;
+    color?: string;
+    strokeWidth?: string | number;
+    absoluteStrokeWidth?: boolean;
+}
+type StrokeIcon = ForwardRefExoticComponent<Omit<StrokeIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
+declare function createIcon(iconName: string, iconNode: IconNode): StrokeIcon;
+
+export { type IconNode, type StrokeIcon, type StrokeIconProps, createIcon };

package/dist/create-icon.d.ts

@@ -0,0 +1,19 @@
+import { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react';
+
+type SVGElementType = "path";
+type IconNode = readonly [
+    elementName: SVGElementType,
+    attrs: Record<string, string>
+][];
+type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
+type ElementAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
+interface StrokeIconProps extends ElementAttributes {
+    size?: string | number;
+    color?: string;
+    strokeWidth?: string | number;
+    absoluteStrokeWidth?: boolean;
+}
+type StrokeIcon = ForwardRefExoticComponent<Omit<StrokeIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
+declare function createIcon(iconName: string, iconNode: IconNode): StrokeIcon;
+
+export { type IconNode, type StrokeIcon, type StrokeIconProps, createIcon };

package/dist/create-icon.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef } from "react";
+function joinClassNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function parseLength(value) {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) {
+      return null;
+    }
+    return { value, unit: "" };
+  }
+  const trimmed = value.trim();
+  const match = trimmed.match(/^(-?\d*\.?\d+)([a-z%]*)$/i);
+  if (!match) {
+    return null;
+  }
+  const numericValue = Number(match[1]);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+  return {
+    value: numericValue,
+    unit: (match[2] ?? "").toLowerCase()
+  };
+}
+function resolveStrokeWidth(strokeWidth, size, absoluteStrokeWidth) {
+  if (!absoluteStrokeWidth) {
+    return strokeWidth;
+  }
+  const parsedSize = parseLength(size);
+  const parsedStrokeWidth = parseLength(strokeWidth);
+  if (!parsedSize || parsedSize.value === 0 || !parsedStrokeWidth) {
+    return strokeWidth;
+  }
+  const hasExplicitSizeUnit = parsedSize.unit !== "" && parsedSize.unit !== "px";
+  const hasExplicitStrokeUnit = parsedStrokeWidth.unit !== "" && parsedStrokeWidth.unit !== "px";
+  if (hasExplicitSizeUnit && !hasExplicitStrokeUnit) {
+    return strokeWidth;
+  }
+  if (parsedSize.unit !== "" && parsedStrokeWidth.unit !== "" && parsedSize.unit !== parsedStrokeWidth.unit) {
+    return strokeWidth;
+  }
+  return parsedStrokeWidth.value * 32 / parsedSize.value;
+}
+const IconBase = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 1.5,
+    absoluteStrokeWidth = true,
+    className,
+    children,
+    iconNode,
+    ...props
+  }, ref) => {
+    const resolvedStrokeWidth = resolveStrokeWidth(
+      strokeWidth,
+      size,
+      absoluteStrokeWidth
+    );
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        viewBox: "0 0 32 32",
+        fill: "none",
+        stroke: color,
+        strokeWidth: resolvedStrokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: joinClassNames("br-icon", className),
+        ...props,
+        children: [
+          iconNode.map(
+            ([elementName, attrs]) => createElement(elementName, {
+              key: `${elementName}-${attrs.d}`,
+              ...attrs
+            })
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+IconBase.displayName = "IconBase";
+function createIcon(iconName, iconNode) {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+      IconBase,
+      {
+        ref,
+        iconNode,
+        className: joinClassNames(`br-icon-${iconName}`, className),
+        ...props
+      }
+    )
+  );
+  Component.displayName = iconName;
+  return Component;
+}
+export {
+  createIcon
+};