phosphor-react - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

src/test/index.test.tsx

dist/index.d.ts

		export type { Icon, IconProps } from "./lib";
		export { IconContext } from "./lib";
		export { default as ArrowUpRightCircle } from "./icons/ArrowUpRightCircle";
		@@ -3,0 +4,0 @@ export { default as ArrowUpLeftCircle } from "./icons/ArrowUpLeftCircle";

dist/lib/index.d.ts

		@@ -9,1 +9,3 @@ import { DOMAttributes, SVGAttributes } from "react";
		export declare type Icon = React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
		export declare type IconContext = Required<Pick<IconProps, "color" \| "size" \| "weight" \| "mirrored">> & SVGAttributes<SVGSVGElement>;
		export declare const IconContext: import("react").Context<IconContext>;

package.json

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

README.md

		<img src="https://i.imgur.com/QKFwzHe.png" width="192" align="right" />

		# phosphor-react

		A clear, playful, and adaptable icon family for React.
		@@ -14,6 +15,9 @@
		## Installation

		```bash
		yarn add phosphor-react
		```

		or

		```bash
		@@ -24,2 +28,3 @@ npm install --save phosphor-react
		## Usage

		```tsx
		@@ -32,8 +37,8 @@ import React from "react";
		return (
		<>
		<div>
		<Horse />
		<Heart color="#AE2983" weight="fill" size={32} />
		<Cube color="teal" weight="duotone" />
		</>
		)
		</div>
		);
		};
		@@ -45,3 +50,5 @@
		### 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.
		@@ -52,2 +59,37 @@ - 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`.

		### Context

		Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an `IconContext.Provider` at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:

		```tsx
		import React from "react";
		import ReactDOM from "react-dom";
		import { IconContext, Horse, Heart, Cube } from "phosphor-react";

		const App = () => {
		return (
		<IconContext.Provider
		value={{
		color: "limegreen",
		size: 32,
		weight: "bold",
		mirrored: false,
		}}
		>
		<div>
		<Horse /> {/* I'm lime-green, 32px, and bold! */}
		<Heart /> {/* Me too! */}
		<Cube /> {/* Me three :) */}
		</div>
		</IconContext.Provider>
		)
		};

		ReactDOM.render(<App />, document.getElementById("root"));
		```

		You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.

		Note: The `color`, `size`, `weight`, and `mirrored` properties are all required props when creating a context.

		<!-- ### Composability -->
		@@ -57,2 +99,3 @@ <!-- 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.
		@@ -63,5 +106,5 @@
		...
		<Icon.Smiley>
		<Icon.Folder weight="thin">
		<Icon.BatteryHalf size="24px">
		<Icon.Smiley />
		<Icon.Folder weight="thin" />
		<Icon.BatteryHalf size="24px" />
		```
		@@ -68,0 +111,0 @@

src/lib/index.ts

		@@ -1,2 +0,2 @@
		import { DOMAttributes, SVGAttributes } from "react";
		import { DOMAttributes, SVGAttributes, createContext } from "react";

		@@ -10,2 +10,3 @@ export interface IconProps
		mirrored?: boolean;
		// context?: React.Context<IconContext>;
		}
		@@ -16,1 +17,13 @@
		>;

		export type IconContext = Required<
		Pick<IconProps, "color" \| "size" \| "weight" \| "mirrored">
		> &
		SVGAttributes<SVGSVGElement>;

		export const IconContext = createContext<IconContext>({
		color: "currentColor",
		size: "1em",
		weight: "regular",
		mirrored: false,
		});

dist/phosphor-react.cjs.development.js

Sorry, the diff of this file is too big to display

dist/phosphor-react.cjs.development.js.map