phosphor-react - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/icons/_IconComponent.d.ts

 import React from "react";
 import { IconProps } from "../lib";
-declare const XXX: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
-export default XXX;
+declare const name: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export default name;

dist/index.d.ts

@@ -31,3 +31,2 @@ export { default as ArrowUpRightCircle } from "./icons/ArrowUpRightCircle";
 export { default as Search } from "./icons/Search";
-export { default as SearchAlt } from "./icons/SearchAlt";
 export { default as Smiley } from "./icons/Smiley";
@@ -34,0 +33,0 @@ export { default as SmileyMeh } from "./icons/SmileyMeh";

dist/lib/index.d.ts

@@ -6,3 +6,4 @@ import { DOMAttributes, SVGAttributes } from "react";
     weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+    mirrored?: boolean;
 }
 export declare type Icon = React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package.json

 {
   "name": "phosphor-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A clean and friendly icon family for React",
@@ -5,0 +5,0 @@ "author": "rektdeckard",

README.md

@@ -0,10 +1,19 @@
+<img src="https://i.imgur.com/QKFwzHe.png" width="192" align="right" />
+
 # phosphor-react
+A clear, playful, and adaptable icon family for React.
 
-> A clean and friendly icon family for React
+[![NPM](https://img.shields.io/npm/v/phosphor-react.svg?style=flat-square)](https://www.npmjs.com/package/phosphor-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](https://standardjs.com)
 
-[![NPM](https://img.shields.io/npm/v/phosphor-react.svg)](https://www.npmjs.com/package/phosphor-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![GitHub stars](https://img.shields.io/github/stars/rektdeckard/phosphor-react?style=flat-square&label=Star)](https://github.com/rektdeckard/phosphor-react)
+[![GitHub forks](https://img.shields.io/github/forks/rektdeckard/phosphor-react?style=flat-square&label=Fork)](https://github.com/rektdeckard/phosphor-react/fork)
+[![GitHub watchers](https://img.shields.io/github/watchers/rektdeckard/phosphor-react?style=flat-square&label=Watch)](https://github.com/rektdeckard/phosphor-react)
+[![Follow on GitHub](https://img.shields.io/github/followers/rektdeckard?style=flat-square&label=Follow)](https://github.com/rektdeckard)
 
-## Install
-
+## Installation
 ```bash
+yarn add phosphor-react
+```
+or
+```bash
 npm install --save phosphor-react
@@ -14,18 +23,43 @@ ```
 ## Usage
-
 ```tsx
-import React, { Component } from 'react'
+import React from "react";
+import ReactDOM from "react-dom";
+import { Horse, Heart, Cube } from "phosphor-react";
 
-import MyComponent from 'phosphor-react'
-import 'phosphor-react/dist/index.css'
+const App = () => {
+  return (
+    <>
+      <Horse />
+      <Heart color="#AE2983" weight="fill" size={32} />
+      <Cube color="teal" weight="duotone" />
+    </>
+  )
+};
 
-class Example extends Component {
-  render() {
-    return <MyComponent />
-  }
-}
+ReactDOM.render(<App />, document.getElementById("root"));
 ```
 
+### Props
+Icon components accept all props that you can pass to a normal SVG element, including inline `style` objects, `onClick` handlers, and more. The main way of styling them will usually be with the following props:
+- `color?: string`: Icon stroke/fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors, or the special `currentColor` variable.
+- `size?: number | string`: Icon height & width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`.
+- `weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone"`: Icon weight/style. Can be used, for example, to "toggle" an icon's state: a rating component could use Stars with `weight="regular"` to denote an empty star, and `weight="fill"` to denote a filled star.
+- `mirrored?: boolean`: Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
+
+<!-- ### Composability -->
+<!-- Icons can be composed with children... -->
+
+### Imports
+You may wish to import all icons at once for use in your project, though depending on your bundler this could prevent tree-shaking and make your app's bundle larger.
+
+```tsx
+import * as Icon from "phosphor-react";
+...
+<Icon.Smiley>
+<Icon.Folder weight="thin">
+<Icon.BatteryHalf size="24px">
+```
+
 ## License
 
 MIT © [rektdeckard](https://github.com/rektdeckard)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Number of lines in readme file

65

increased by109.68%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1949653

decreased by-13.33%

Lines of code

10931

decreased by-20.92%

No dependency changes