@shish2k/react-faicon 0.0.0 → 0.0.1

package/README.md

@@ -1,13 +1,13 @@
 # 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.
+Because `@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 { FAIcon } from '@shish2k/react-faicon';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 
 export function App() {

package/dist/index.d.ts

@@ -1,17 +1,7 @@
-import React from "react";
-type FAIconProps = React.SVGProps<SVGSVGElement> & {
-    icon: {
-        icon: [
-            number,
-            number,
-            string[],
-            string,
-            string
-        ];
-        prefix: string;
-        iconName: string;
-    };
+import type { RefAttributes, SVGAttributes } from 'react';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+export interface FAIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>, RefAttributes<SVGSVGElement> {
+    icon: IconDefinition;
     className?: string;
-};
+}
 export declare function FAIcon({ icon, className, ...svgProps }: FAIconProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/index.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import "react";
-function FAIcon({ icon, className = "", ...svgProps }) {
-    const [width, height, _aliases, _unicode, svgPathData] = icon.icon;
+function FAIcon({ icon, className = '', ...svgProps }) {
+    let [width, height, _ligatures, _unicode, svgPathData] = icon.icon;
+    if ('string' == typeof svgPathData) svgPathData = [
+        svgPathData
+    ];
     return /*#__PURE__*/ jsx("svg", {
         "aria-hidden": "true",
         focusable: "false",
@@ -9,21 +11,21 @@ function FAIcon({ icon, className = "", ...svgProps }) {
         "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"
+            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
-        })
+        children: svgPathData.map((d, i)=>/*#__PURE__*/ jsx("path", {
+                fill: "currentColor",
+                d: d
+            }, i))
     });
 }
 export { FAIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shish2k/react-faicon",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "author": "Shish <shish+npm@shishnet.org>",
   "license": "MIT",
   "repository": "shish/react-faicon",
@@ -36,6 +36,7 @@
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "@fortawesome/fontawesome-common-types": ">=7.0.0"
   }
 }