@shish2k/react-faicon 0.0.0

package/README.md

@@ -0,0 +1,29 @@
+# Tiny FontAwesome Icon Component for React
+
+Because for some reason `@fortawesome/react-fontawesome` bloats my final bundle by 80KB, to render <1KB of SVG tags.
+
+This package has fewer features (no animation, no invert-opacity mode, etc). But if all you want is to render an icon, it does that. It uses the same icon data from `@fortawesome/free-solid-svg-icons`, so it should be a drop-in replacement for basic use cases.
+
+Example usage:
+
+```tsx
+import { FAIcon } from '@shish/react-faicon';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+
+export function App() {
+  return <FAIcon icon={faPlay} />;
+}
+```
+
+## Dev Setup
+
+```bash
+npm install
+npm run build
+```
+
+Build the library in watch mode:
+
+```bash
+npm run dev
+```

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+type FAIconProps = React.SVGProps<SVGSVGElement> & {
+    icon: {
+        icon: [
+            number,
+            number,
+            string[],
+            string,
+            string
+        ];
+        prefix: string;
+        iconName: string;
+    };
+    className?: string;
+};
+export declare function FAIcon({ icon, className, ...svgProps }: FAIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+function FAIcon({ icon, className = "", ...svgProps }) {
+    const [width, height, _aliases, _unicode, svgPathData] = icon.icon;
+    return /*#__PURE__*/ jsx("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        "data-prefix": icon.prefix,
+        "data-icon": icon.iconName,
+        className: `fa-${icon.iconName} ${className}`,
+        style: {
+            boxSizing: "content-box",
+            display: "inline-block",
+            height: "1em",
+            width: "1em",
+            overflow: "visible",
+            verticalAlign: "-0.125em"
+        },
+        role: "img",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${width} ${height}`,
+        ...svgProps,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "currentColor",
+            d: svgPathData
+        })
+    });
+}
+export { FAIcon };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@shish2k/react-faicon",
+  "version": "0.0.0",
+  "author": "Shish <shish+npm@shishnet.org>",
+  "license": "MIT",
+  "repository": "shish/react-faicon",
+  "homepage": "https://github.com/shish/react-faicon",
+  "bugs": {
+    "url": "https://github.com/shish/react-faicon/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build",
+    "check": "biome check --write",
+    "dev": "rslib build --watch",
+    "format": "biome format --write",
+    "release": "git tag $npm_package_version && git push && git push --tags && npm publish --tag latest --access public"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.2",
+    "@rsbuild/plugin-react": "^1.4.2",
+    "@rslib/core": "^0.18.2",
+    "@types/react": "^19.2.6",
+    "react": "^19.2.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}