@primer/octicons-react - npm Package Compare versions

Comparing version 0.0.0-6c9f58f to 0.0.0-709e9fd

dist/icons.d.ts

 /* THIS FILE IS GENERATED. DO NOT EDIT IT. */
 import * as React from 'react'
-
+import {OcticonProps} from './';
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
 type Icon<
   W extends number = number,
   H extends number = number
-> = React.SFC<{}> & { size: [W, H] };
-
+> = React.SFC<Omit<OcticonProps, 'icon'>> & { size: [W, H] };
 declare const Alert: Icon<16, 16>
@@ -200,3 +200,2 @@ declare const Archive: Icon<14, 16>
 declare const Zap: Icon<10, 16>
-
 type iconsByName = {
@@ -396,3 +395,2 @@ 'alert': Icon<16, 16>,
 declare const iconsByName: iconsByName
-
 declare function getIconByName<T extends keyof iconsByName>(
@@ -402,3 +400,2 @@ name: T
 declare function getIconByName(name: string): Icon | undefined
-
 export {
@@ -405,0 +402,0 @@ Icon,

dist/index.d.ts

@@ -23,3 +23,1 @@ import * as React from 'react'
 ): Icon<W, H>
-
-export * from './icons'

package.json

 {
   "name": "@primer/octicons-react",
-  "version": "0.0.0-6c9f58f",
+  "version": "0.0.0-709e9fd",
   "description": "A scalable set of icons handcrafted with <3 by GitHub.",
@@ -13,3 +13,4 @@ "homepage": "https://octicons.github.com",
   "scripts": {
-    "build": "script/build.js && script/types.js && npm run rollup",
+    "build": "npm run build:icons && script/build.js && script/types.js && npm run rollup",
+    "build:icons": "svgr --out-dir=./src/build \"../build/svg/*.svg\" && cp -Rp src/build/svg/ src/icons && rm -r src/build && babel --no-babelrc --presets=env,stage-0,react --out-dir ./ src/icons",
     "ts-test": "tsc -P ts-tests",
@@ -35,2 +36,7 @@ "test": "jest",
     "@types/react": "^16.4.6",
+    "@svgr/cli": "^4.3.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-inline-react-svg": "^1.1.0",
     "babel-preset-env": "^1.7.0",
@@ -37,0 +43,0 @@ "babel-preset-react": "^6.24.1",

pages/index.js

 import React from 'react'
 import {Block, Text} from 'primer-react'
 import pkg from '../package.json'
-import Octicon, {iconsByName} from '../'
+import Octicon, {iconsByName} from '../index.umd'
 
@@ -6,0 +6,0 @@ export default function App() {

README.md

@@ -13,27 +13,4 @@ # [Octicons] for React
 
-### `<Octicon>`
-The `<Octicon>` component is really just the "shell" of an Octicon that renders
-the `<svg>` element and all of its attributes. To render a specific icon, you
-must pass it either via the `icon` prop, or as the only child:
-
-```jsx
-/**
- * The prop form is shorter, but doesn't allow you to pass icon props.
- */
-<Octicon icon={Icon} />
-
-/**
- * The child form allows you to pass props.
- */
-<Octicon><Icon x={10}/></Octicon>
-```
-
-Note that none of our builtin icons take props, so unless you're creating
-[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.
-
 ### Icons
-The `@primer/octicons-react` module exports the `Octicon` component as
-`default` and the individual icon symbols as separate [named
-exports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This
-allows you to import only the icons that you need without blowing up your
+The `@primer/octicons-react` module exports the individual icon components as separate files. This allows you to import only the icons that you need without blowing up your
 bundle:
@@ -43,56 +20,13 @@
 import React from 'react'
-import Octicon, {Beaker, Zap} from '@primer/octicons-react'
+import Beaker from '@primer/octicons-react/Beaker';
+import Zap from '@primer/octicons-react/Zap';
 
 export default function Icon({boom}) {
-  return <Octicon icon={boom ? Zap : Beaker}/>
+  return boom ? <Zap /> : <Beaker />
 }
 ```
 
-If you were to compile this example with a tool that supports [tree-shaking][]
-(such as Webpack, Rollup, or Parcel) the resulting bundle would only include
-the "zap" and "beaker" icons.
+### `<Octicon>`
+The `<Octicon>` component is exported as `default` from `@primer/octicons-react` and is really just the "shell" of an Octicon that renders the `<svg>` element and all of its attributes. Note that all icons are automatically wrapped in this component.
 
-### All icons
-If you don't mind your bundle being huge or you need to be able to render
-arbitrarily named icons at runtime, you can import either of the following
-named exports:
-
-#### `getIconByName()`
-The `getIconByName` export is a function that takes a lowercase octicon name
-(such as `arrow-right`) and returns the corresponding icon class. Using this
-helper, it's possible to create an Octicon class that takes a `name` prop and
-resolves it to the right component:
-
-```jsx
-import React from 'react'
-import Octicon, {getIconByName} from '@primer/octicons-react'
-
-export default function OcticonByName({name, ...props}) {
-  return <Octicon {...props} icon={getIconByName(name)} />
-}
-```
-
-#### `iconsByName`
-The `iconsByName` export is an object that maps keys (such as `arrow-right` or
-`zap`) to component functions, which you can use to generate listings of all
-the octicons:
-
-```jsx
-import React from 'react'
-import Octicon, {iconsByName} from '@primer/octicons-react'
-
-export default function OcticonsList() {
-  return (
-    <ul>
-      {Object.keys(iconsByName).map(key => (
-        <li key={key}>
-          <tt>{key}</tt>
-          <Octicon icon={iconsByName[key]}/>
-        </li>
-      ))}
-    </ul>
-  )
-}
-```
-
 ### Vertical alignment
@@ -104,7 +38,7 @@ By default the octicons have `vertical-align: text-bottom;` applied as inline
 ```js
-import Octicon, {Repo} from '@primer/octicons-react'
+import Repo from '@primer/octicons-react/Repo'
 
 export default () => (
   <h1>
-    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github
+    <Repo size='large' verticalAlign='middle' /> github/github
   </h1>
@@ -122,7 +56,7 @@ )
 // Example usage
-import Octicon, {Plus} from '@primer/octicons-react'
+import Plus from '@primer/octicons-react/Plus'
 
 export default () => (
   <button>
-    <Octicon icon={Plus} ariaLabel="Add new item" /> New
+    <Plus ariaLabel="Add new item" /> New
   </button>
@@ -145,3 +79,3 @@ )
 // Example usage
-import Octicon, {LogoGithub} from '@primer/octicons-react'
+import LogoGithub from '@primer/octicons-react/LogoGithub'
 
@@ -151,3 +85,3 @@ export default () => (
     <a href='https://github.com'>
-      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>
+      <LogoGithub size='large' ariaLabel='GitHub'/>
     </a>
@@ -154,0 +88,0 @@ </h1>

ts-tests/tsconfig.json

@@ -6,2 +6,3 @@ {
     "module": "commonjs",
+    "esModuleInterop": true,
     "noEmit": true,
@@ -12,3 +13,3 @@ "noImplicitAny": true,
   },
-  "files": ["../src/index.d.ts", "./index.tsx"]
+  "files": ["./index.tsx"]
 }

New 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

Improved metrics

Total package byte prevSize

538573

increased by47.64%

Number of package files

587

increased by189.16%

Lines of code

7067

increased by115.85%

Worsened metrics

Dev dependency count

23

increased by27.78%

Number of lines in readme file

132

decreased by-33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes