@rdicons/react-rd 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@rdicons/react-rd",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "rd: 543 icons as React components. Just this library, tree-shakable. Part of rdicons.",
+  "keywords": [
+    "icons",
+    "react",
+    "svg",
+    "rd",
+    "rdicons"
+  ],
+  "license": "MIT",
+  "author": "rdicons contributors",
+  "homepage": "https://rdicons.vimalbhatt.com/library/rd",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DevHydeOut/rdicons-lib.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DevHydeOut/rdicons-lib/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "runtime.js",
+    "runtime.d.ts",
+    "LICENSES",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/runtime.d.ts

@@ -0,0 +1,25 @@
+import type { ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
+
+export interface RdIconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'children' | 'dangerouslySetInnerHTML'> {
+  /** Width and height in px (or any CSS length). Default 24 */
+  size?: number | string
+  /** Any CSS color. Default: inherits the surrounding text color (currentColor) */
+  color?: string
+  /** Replaces the icon's own stroke width (outline icons only) */
+  strokeWidth?: number | string
+  /** Accessible name. Without it the icon is hidden from screen readers (decorative) */
+  title?: string
+  /**
+   * Plays the icon's animation (icons without one ignore this). Off by default.
+   * `true` or `"hover"`: when the icon is hovered. `"parent"`: when its parent (for example a button) is hovered.
+   * `"play"`: while set (change it away and back to replay). `"loop"`: continuously.
+   * Nothing moves when the user's device asks for reduced motion.
+   */
+  animate?: boolean | 'hover' | 'parent' | 'play' | 'loop'
+  /** Animation speed: 2 is twice as fast, 0.5 twice as slow. Default 1 */
+  speed?: number
+}
+
+export type RdIcon = ForwardRefExoticComponent<RdIconProps & RefAttributes<SVGSVGElement>>
+
+export declare function createIcon(id: string, body: string, width?: number, height?: number, anim?: { b: string; c: string }): RdIcon

package/runtime.js

@@ -0,0 +1,40 @@
+import { createElement, forwardRef } from 'react'
+
+const STROKE_WIDTH = /stroke-width="[^"]*"/g
+const escapeHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+
+/**
+ * Turns an icon (SVG inner markup + viewBox size) into a React component.
+ * Every generated icon in this package is created with this function.
+ */
+export function createIcon(id, body, width = 24, height = 24, anim) {
+  const name = id.slice(id.indexOf(':') + 1)
+  const Icon = forwardRef(function RdIcon({ size = 24, color, strokeWidth, title, style, animate, speed, className, ...rest }, ref) {
+    // Animation is opt-in. Only icons that have motion (anim = { b: animated drawing, c: css }) react to `animate`; the rest ignore it.
+    const mode = anim && animate ? (animate === true ? 'hover' : animate) : null
+    const drawing = mode ? anim.b : body
+    const html = strokeWidth == null ? drawing : drawing.replace(STROKE_WIDTH, 'stroke-width="' + strokeWidth + '"')
+    // Fit the longest side into the `size` box, like the rdicons website does.
+    const n = typeof size === 'number' ? size : Number.parseFloat(size)
+    const long = Math.max(width, height)
+    const w = typeof size === 'number' && width !== height ? (n * width) / long : size
+    const h = typeof size === 'number' && width !== height ? (n * height) / long : size
+    return createElement('svg', {
+      ref,
+      xmlns: 'http://www.w3.org/2000/svg',
+      viewBox: '0 0 ' + width + ' ' + height,
+      width: w,
+      height: h,
+      role: title ? 'img' : undefined,
+      'aria-hidden': title ? undefined : true,
+      focusable: 'false',
+      className: mode ? 'rd-a-' + name + (className ? ' ' + className : '') : className,
+      'data-rd-animate': mode || undefined,
+      style: color || (mode && speed) ? { ...(color ? { color } : null), ...(mode && speed ? { '--rd-speed': 1 / speed } : null), ...style } : style,
+      ...rest,
+      dangerouslySetInnerHTML: { __html: (title ? '<title>' + escapeHtml(title) + '</title>' : '') + (mode ? '<style>' + anim.c + '</style>' : '') + html },
+    })
+  })
+  Icon.displayName = id
+  return Icon
+}