@fortawesome/react-fontawesome - npm Package Compare versions

Comparing version 0.1.0-1 to 0.1.0-2

index.js

@@ -518,3 +518,2 @@ (function (global, factory) {
 
-  var convertCurry = convert.bind(null, React.createElement);
   var extraProps = {};
@@ -576,2 +575,4 @@
 
+var convertCurry = convert.bind(null, React.createElement);
+
 fontawesome.noAuto();
@@ -578,0 +579,0 @@

package.json

 {
   "name": "@fortawesome/react-fontawesome",
   "description": "Official React component for Font Awesome 5",
-  "version": "0.1.0-1",
+  "version": "0.1.0-2",
   "main": "index.js",
@@ -51,5 +51,5 @@ "types": "index.d.ts",
   "files": [
-    "index.js",
-    "index.d.ts"
+    "./index.js",
+    "./index.d.ts"
   ]
 }

README.md

@@ -354,1 +354,55 @@ # react-fontawesome
 ```
+
+### TypeScript
+
+Typings are included in this package. However, most types are defined in the
+underlying API library, <span style="whitespace:nowrap;">`@fortawesome/fontawesome`</span>.
+
+Suppose that in one module, you add all `fas` icons to the library:
+```
+import { library } from '@fortawesome/fontawesome'
+import { fas } from '@fortawesome/fontawesome-free-solid'
+
+library.add(fas)
+
+// ...
+```
+
+Then suppose that in another module, you have some code that looks up
+one of the icons in the library. The `import` statement below imports two types
+and one function:
+
+```
+import { IconLookup, IconDefinition, findIconDefinition } from '@fortawesome/fontawesome'
+
+const coffeeLookup: IconLookup = { prefix: 'fas', iconName: 'coffee' }
+const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)
+
+// ...
+
+export class App extends React.Component {
+  render() {
+    return (
+      <div className="App">
+          <h1>
+              <FontAwesomeIcon icon={coffeeIconDefinition} />
+          </h1>
+      </div>
+    );
+  }
+}
+```
+NOTE: You wouldn't normally declare intermediate objects like `coffeeLookup`
+just to look up an icon. So this is cumbersome and needlessly verbose for
+such a simple example. The purpose here is just to show how you might
+import type definitions and use them in declarations when it _does_ make
+sense to do so.
+
+Several types, including `IconLookup` and `IconDefinition`, appearing above,
+ actually originate from the
+<span style="whitespace:nowrap;">`@fortawesome/fontawesome-common-types`</span>
+package. They are re-exported from both <span style="whitespace:nowrap;">`@fortawesome/fontawesome`</span>
+and <span style="whitespace:nowrap;">`@fortawesome/fontawesome-free-solid`</span>
+(and other icon packs). This is just to make importing more convenient in
+some cases.
+Refer to the `index.d.ts` in any module to see which types it exports.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30308

increased by4.39%

Number of lines in readme file

407

increased by14.97%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

5

decreased by-16.67%

Lines of code

421

decreased by-6.44%

No dependency changes