@refine-studio/refine-icons 0.0.0 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Refine Studio
+
+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

@@ -1,3 +1,47 @@
-# @refine-studio/refine-icons
+# 🎨 refine-icons
 
-Placeholder that reserves the name. The first real version is 0.1.0, published from https://github.com/refine-studio/refine-icons.
+Refine icons: one drawing per icon, built into an SVG sprite and React icons ([RS-2014](https://bumg.atlassian.net/browse/RS-2014)).
+
+```sh
+pnpm add @refine-studio/refine-icons
+```
+
+## 🧩 Use
+
+| You want                     | Import                                                                         |
+| ---------------------------- | ------------------------------------------------------------------------------ |
+| One React icon               | `import { RefineIconArrowDownLG } from '@refine-studio/refine-icons'`          |
+| An icon by its name, in data | `import { REFINE_ICON_NAMES } from '@refine-studio/refine-icons/names'`        |
+| The name type                | `import type { IconName } from '@refine-studio/refine-icons'`                  |
+| The sprite                   | `@refine-studio/refine-icons/sprite.svg`, then `<use href="…#Arrow_Down_LG"/>` |
+| One drawing                  | `@refine-studio/refine-icons/icons/Arrow_Down_LG.svg`                          |
+
+A React icon takes `size` (24), `strokeWidth` (2), `className` and any SVG prop. It draws in `currentColor`. A path with its own stroke width scales with the icon's.
+
+## ✏️ Add an icon
+
+1. Draw it on the set's grid at a 2px line, round caps and joins, in `currentColor`.
+2. Save it as `icons/<Name_Like_This>.svg`, with the root defaults every drawing has (`fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"`) and flat `<path/>`s only. The build refuses anything else.
+3. `pnpm test`, then open a pull request.
+
+## 🛠️ Develop
+
+Node 24 (`nvm use`), pnpm.
+
+| Script           | Does                                                          |
+| ---------------- | ------------------------------------------------------------- |
+| `pnpm generate`  | `icons/*.svg` → `src/generated/` (React icons, names, sprite) |
+| `pnpm build`     | generate, then `dist/`                                        |
+| `pnpm typecheck` | generate, then `tsc`                                          |
+| `pnpm lint`      | ESLint and Prettier                                           |
+| `pnpm test`      | generate, then Vitest                                         |
+
+`test/refine-ui-icons.json` holds Refine UI's own path props. The test proves every icon drawn at 1.75 matches them. `scripts/import-refine-ui-icons.mjs` wrote both from refine-ui's `src/icons/refine-icons.ts`.
+
+## 🚀 Release
+
+Bump `version` in `package.json`, merge, then push a `v<version>` tag. `release.yml` publishes to npm through trusted publishing (no token) and opens a GitHub release.
+
+## ⚖️ Licence
+
+MIT

package/dist/create-refine-icon.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, SVGProps } from 'react';
+export interface RefineIconProps extends ComponentProps<'svg'> {
+    size?: number | string;
+}
+type RefineIconPath = SVGProps<SVGPathElement>;
+/**
+ * Builds a React icon from one drawing. It takes the same `size`, `strokeWidth` and `className` props as a lucide icon.
+ */
+export declare const createRefineIcon: (name: string, viewBox: string, paths: RefineIconPath[]) => {
+    ({ size, strokeWidth, ...props }: RefineIconProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/create-refine-icon.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+// src/create-refine-icon.tsx
+/** Every drawing is made at this stroke width. */
+var DRAWN_STROKE_WIDTH = 2;
+/**
+* Scales a path's own stroke width with the icon's, so a thicker detail stays thicker by the same ratio.
+*/
+var scalePathStrokeWidth = (pathStrokeWidth, strokeWidth) => {
+	const scaled = Number(pathStrokeWidth) * Number(strokeWidth) / DRAWN_STROKE_WIDTH;
+	return Number.isFinite(scaled) ? Number(scaled.toFixed(3)) : pathStrokeWidth;
+};
+/**
+* Builds a React icon from one drawing. It takes the same `size`, `strokeWidth` and `className` props as a lucide icon.
+*/
+var createRefineIcon = (name, viewBox, paths) => {
+	/**
+	* Renders the icon in currentColor at the 2px stroke it is drawn at.
+	*/
+	const RefineIcon = ({ size = 24, strokeWidth = DRAWN_STROKE_WIDTH, ...props }) => {
+		return /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			"data-icon": name,
+			"data-slot": "icon",
+			fill: "none",
+			height: size,
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth,
+			viewBox,
+			width: size,
+			xmlns: "http://www.w3.org/2000/svg",
+			...props,
+			children: paths.map((path) => {
+				return path.strokeWidth === void 0 ? /* @__PURE__ */ jsx("path", { ...path }, path.d) : /* @__PURE__ */ jsx("path", {
+					...path,
+					strokeWidth: scalePathStrokeWidth(path.strokeWidth, strokeWidth)
+				}, path.d);
+			})
+		});
+	};
+	RefineIcon.displayName = `RefineIcon${name.replaceAll("_", "")}`;
+	return RefineIcon;
+};
+export { createRefineIcon };
+
+//# sourceMappingURL=create-refine-icon.js.map

package/dist/create-refine-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-refine-icon.js","names":[],"sources":["../src/create-refine-icon.tsx"],"sourcesContent":["import type { ComponentProps, SVGProps } from 'react';\n\nexport interface RefineIconProps extends ComponentProps<'svg'> {\n  size?: number | string;\n}\n\ntype RefineIconPath = SVGProps<SVGPathElement>;\n\n/** Every drawing is made at this stroke width. */\nconst DRAWN_STROKE_WIDTH = 2;\n\n/**\n * Scales a path's own stroke width with the icon's, so a thicker detail stays thicker by the same ratio.\n */\nconst scalePathStrokeWidth = (pathStrokeWidth: RefineIconPath['strokeWidth'], strokeWidth: number | string) => {\n  const scaled = (Number(pathStrokeWidth) * Number(strokeWidth)) / DRAWN_STROKE_WIDTH;\n\n  return Number.isFinite(scaled) ? Number(scaled.toFixed(3)) : pathStrokeWidth;\n};\n\n/**\n * Builds a React icon from one drawing. It takes the same `size`, `strokeWidth` and `className` props as a lucide icon.\n */\nexport const createRefineIcon = (name: string, viewBox: string, paths: RefineIconPath[]) => {\n  /**\n   * Renders the icon in currentColor at the 2px stroke it is drawn at.\n   */\n  const RefineIcon = ({ size = 24, strokeWidth = DRAWN_STROKE_WIDTH, ...props }: RefineIconProps) => {\n    return (\n      <svg\n        aria-hidden=\"true\"\n        data-icon={name}\n        data-slot=\"icon\"\n        fill=\"none\"\n        height={size}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={strokeWidth}\n        viewBox={viewBox}\n        width={size}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n      >\n        {paths.map((path) => {\n          return path.strokeWidth === undefined ? (\n            <path key={path.d} {...path} />\n          ) : (\n            <path key={path.d} {...path} strokeWidth={scalePathStrokeWidth(path.strokeWidth, strokeWidth)} />\n          );\n        })}\n      </svg>\n    );\n  };\n\n  RefineIcon.displayName = `RefineIcon${name.replaceAll('_', '')}`;\n\n  return RefineIcon;\n};\n"],"mappings":";;;AASA,IAAM,qBAAqB;;;;AAK3B,IAAM,wBAAwB,iBAAgD,gBAAiC;CAC7G,MAAM,SAAU,OAAO,eAAe,IAAI,OAAO,WAAW,IAAK;CAEjE,OAAO,OAAO,SAAS,MAAM,IAAI,OAAO,OAAO,QAAQ,CAAC,CAAC,IAAI;AAC/D;;;;AAKA,IAAa,oBAAoB,MAAc,SAAiB,UAA4B;;;;CAI1F,MAAM,cAAc,EAAE,OAAO,IAAI,cAAc,oBAAoB,GAAG,YAA6B;EACjG,OACE,oBAAC,OAAD;GACE,eAAY;GACZ,aAAW;GACX,aAAU;GACV,MAAK;GACL,QAAQ;GACR,QAAO;GACP,eAAc;GACd,gBAAe;GACF;GACJ;GACT,OAAO;GACP,OAAM;GACN,GAAI;GAEH,UAAA,MAAM,KAAK,SAAS;IACnB,OAAO,KAAK,gBAAgB,KAAA,IAC1B,oBAAC,QAAD,EAAmB,GAAI,KAAO,GAAnB,KAAK,CAAc,IAE9B,oBAAC,QAAD;KAAmB,GAAI;KAAM,aAAa,qBAAqB,KAAK,aAAa,WAAW;IAAI,GAArF,KAAK,CAAgF;GAEpG,CAAC;EACE,CAAA;CAET;CAEA,WAAW,cAAc,aAAa,KAAK,WAAW,KAAK,EAAE;CAE7D,OAAO;AACT"}