-
Notifications
You must be signed in to change notification settings - Fork 827
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Octicons! #222
Merged
Merged
React Octicons! #222
Changes from all commits
Commits
Show all changes
99 commits
Select commit
Hold shift + click to select a range
542d2f6
First commit on a react-octicons component
jonrohan 2cb57f7
Renaming for npmjs
jonrohan b5a9afd
Updating sheild location
jonrohan 0cccc4f
remove clasee
jonrohan a0d68d5
building babel dist
jonrohan d7728f2
Outputting to build instead
jonrohan 36e3e4b
Setting up linting
jonrohan 581a4f2
github-lint?
jonrohan 60d21a7
1.1.0
jonrohan 9d94633
1.1.0
jonrohan 8f120ac
Be explicit so that it's not mixed up with index.scss
jonrohan 20170b6
Making the sizing stricter
jonrohan 11933d8
Large
jonrohan b41121c
Adding alignment options
jonrohan 0071790
Merge branch 'master' into react_octicons
jonrohan ba46dc4
Removing lint from test
jonrohan c72f20b
Renaming
jonrohan a8a7a07
Updating react package to build components
jonrohan 571e219
Revert package.json
jonrohan 1b30538
Cleaning lint
jonrohan d2e5c24
Don't need this in files
jonrohan f962884
Importing separately for all vs specific octicons
jonrohan f0b872f
Adding named.js to the package files
jonrohan cfdb19f
slimmer icons, bulkier <Octicon>
shawnbot 88e952f
UpperCase all the things
shawnbot 661d320
export all the icons???
shawnbot eb64b31
Merge remote-tracking branch 'origin/master' into reocticons
shawnbot 3a8157f
icon output fix, viewBox
shawnbot 6f811ae
add parcel for testing
shawnbot 98826f5
ignore stuff
shawnbot 6a3c8ec
clarify
shawnbot 4ecbf0e
use next.js
shawnbot 635b444
make a table
shawnbot 32a0078
add pages to files list
shawnbot 5c07b32
reasonable FIGMA_DOMAIN default; bail on missing FIGMA_TOKEN
shawnbot e030c2c
remove unneeded rubocop:disable
shawnbot 2cf602c
tidy
shawnbot 85a6fe2
add icons/all endpoint for named icons
shawnbot f587796
clean up deps, add jest
shawnbot 62487aa
add basic tests
shawnbot e7bdde9
add .babelrc that works with jest and next
shawnbot 8404d60
add getIcon(name) example to demo app
shawnbot 4d6dc42
start fleshing out new docs
shawnbot c86a792
add "small" size
shawnbot 5adf596
add iconsByName object export to icons/all
shawnbot 59e2c22
moar docs
shawnbot 7df502a
add tree-shaking link
shawnbot 7ab2d07
tidy up icon docs
shawnbot 39df26a
updating props, examples
shawnbot aa3e559
refactor all icons exports
shawnbot 0386dc2
update docs for new all icons exports
shawnbot 5173a54
nix "ES6"
shawnbot 5f23980
update the "about" bit
shawnbot 91e7dfe
"Octicons for React" sounds better
shawnbot c996c55
linty
shawnbot 4666318
add bit on custom icons, tweak Octicon language
shawnbot de30402
better explain the icon usage options
shawnbot ff8c997
v0.1.0
shawnbot fae9547
move script/build.js => script/build
shawnbot 959f0b7
add comma in "GitHub, Inc."
shawnbot c1db936
update build script name; add preversion run-script
shawnbot 131bb28
move react into peer and dev dependencies
shawnbot 3e8f487
suggest node 8+
shawnbot 9267ee9
move script/build => script/build.js
shawnbot 4f4a9df
add eslint, tidy package.json, build scripts
shawnbot 44ee3c6
add eslint configs
shawnbot babe5c4
tidy up icon builds
shawnbot c3e4956
remove un-applied quotes rule
shawnbot 35029db
don't lint generated .js files
shawnbot e3c85df
eslint --fix
shawnbot 6b9c1f9
add lint script
shawnbot 0bec8ae
lint before testing
shawnbot 970a58c
lint tests
shawnbot b57bf2d
doh
shawnbot f78cf21
add snapshot to Octicon test, hush console.error()
shawnbot e494f3d
add aria-hidden="true", user-select: none
shawnbot ea74679
try rollup?
shawnbot 7115814
update version to match
shawnbot 8351762
tidy up, improve Octicon tests
shawnbot 02a007a
don't set 'module' in package.json
shawnbot 4fce348
do sizing right, moar tests
shawnbot 10a3731
move everything into src/
shawnbot 5be4bd2
update rollup config
shawnbot c068058
write icons to src/icons
shawnbot e8e8929
remove lib/octicons_react/named.js from /.gitignore
shawnbot 63ffd9d
wrapping
shawnbot fc73084
React (not React.js)
shawnbot d80832b
add stage-0, rename next env to "production"
shawnbot d23a00c
use .npmignore instead of files; downgrade next, install stage-0
shawnbot 9d8aca0
refactor rollup config, output ESM + UMD
shawnbot ebbe36b
ignore dist/
shawnbot 8269535
show all the octicons!
shawnbot db11ac7
tidy up rollup config, use env preset
shawnbot 7c9d61d
nix es2015 preset (always use env!)
shawnbot b8f4a03
oops
shawnbot 34a532e
simplify rollup config
shawnbot b014412
nix prepare run-script
shawnbot a008e25
use some primer components
shawnbot b61e03c
clean up build run-script logic, remove pages/ from .npmignore
shawnbot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
1 change: 0 additions & 1 deletion
1
lib/jekyll-octicons/lib/jekyll-octicons.rb → lib/octicons_jekyll/lib/jekyll-octicons.rb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
# rubocop:disable Naming/FileName | ||
require "octicons" | ||
require "jekyll-octicons/version" | ||
require "liquid" | ||
|
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"presets": ["env", "stage-0", "react"], | ||
"env": { | ||
"production": { | ||
"presets": ["next/babel"] | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
src/icons/*.js | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't lint the generated files. 🙈 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"extends": [ | ||
"plugin:github/recommended", | ||
"plugin:github/es6", | ||
"plugin:github/react" | ||
], | ||
"rules": { | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.cache | ||
.next | ||
dist/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
*.config.js | ||
.*.sw? | ||
.*rc | ||
.cache | ||
.eslint* | ||
.gitignore | ||
.next | ||
script | ||
src |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
8 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is for development. I've added the equivalent to |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2018 GitHub Inc. | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,200 @@ | ||
# GitHub Octicons React Component | ||
|
||
[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react) | ||
[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons) | ||
|
||
> [Octicons] for React | ||
|
||
## Install | ||
|
||
``` | ||
$ npm install @github/octicons-react --save | ||
``` | ||
|
||
## Usage | ||
|
||
### `<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 `@github/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 | ||
bundle: | ||
|
||
```jsx | ||
import React from 'react' | ||
import Octicon, {Beaker, Zap} from '@github/octicons-react' | ||
|
||
export default function Icon({boom}) { | ||
return <Octicon icon={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. | ||
|
||
### 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 '@github/octicons-react' | ||
|
||
export default function OcticonByName({name, ...props}) { | ||
return <Octicon {...props} icon={getIcon(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 '@github/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 | ||
By default the octicons have `vertical-align: text-bottom;` applied as inline | ||
styles. You can change the alignment via the `verticalAlign` prop, which can be | ||
either `middle`, `text-bottom`, `text-top`, or `top`. | ||
|
||
```js | ||
import Octicon, {Repo} from '@github/octicons-react' | ||
|
||
export default () => ( | ||
<h1> | ||
<Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github | ||
</h1> | ||
) | ||
``` | ||
|
||
|
||
### `ariaLabel` | ||
You have the option of adding accessibility information to the icon with the | ||
[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the | ||
capitalization of `L`!). | ||
|
||
```js | ||
// Example usage | ||
import Octicon, {Plus} from '@github/octicons-react' | ||
|
||
export default () => ( | ||
<button> | ||
<Octicon icon={Plus} ariaLabel="Add new item" /> New | ||
</button> | ||
) | ||
``` | ||
|
||
|
||
### Sizes | ||
The `size` prop takes `small`, `medium`, and `large` values that can be used to | ||
render octicons at standard sizes: | ||
|
||
| Prop | Rendered Size | | ||
| :- | :- | | ||
| `size='small'` | 16px height by `computed` width | | ||
| `size='medium'` | 32px height by `computed` width | | ||
| `size='large'` | 64px height by `computed` width | | ||
|
||
```js | ||
// Example usage | ||
import Octicon, {LogoGithub} from '@github/octicons-react' | ||
|
||
export default () => ( | ||
<h1> | ||
<a href='https://github.com'> | ||
<Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/> | ||
</a> | ||
</h1> | ||
) | ||
``` | ||
|
||
|
||
## Custom icons | ||
Each of our icon components is really just a function that renders its SVG | ||
`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component | ||
determines the `viewBox` of the `<svg>` element by first looking for a `size` | ||
array on the icon component class. For instance, if you wanted to create a | ||
custom icon that consisted of three circles side by side, you could do this: | ||
|
||
```jsx | ||
import React from 'react' | ||
import Octicon from '@github/octicons-react' | ||
|
||
function CirclesIcon() { | ||
return ( | ||
<React.Fragment> | ||
<circle r={5} cx={5} cy={5}/> | ||
<circle r={5} cx={15} cy={5}/> | ||
<circle r={5} cx={25} cy={5}/> | ||
</React.Fragment> | ||
) | ||
} | ||
|
||
CirclesIcon.size = [30, 10] | ||
|
||
export default CirclesOcticon(props) { | ||
return <Octicon {...props} icon={CirclesIcon} /> | ||
} | ||
``` | ||
|
||
|
||
## License | ||
|
||
(c) GitHub, Inc. | ||
|
||
When using the GitHub logos, be sure to follow the [GitHub logo | ||
guidelines](https://github.com/logos). | ||
|
||
[MIT](./LICENSE) | ||
|
||
[octicons]: https://octicons.github.com/ | ||
[primer]: https://github.com/primer/primer | ||
[docs]: http://primercss.io/ | ||
[npm]: https://www.npmjs.com/ | ||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node | ||
[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking | ||
[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
{ | ||
"name": "@github/octicons-react", | ||
"version": "7.3.0", | ||
"description": "A scalable set of icons handcrafted with <3 by GitHub.", | ||
"homepage": "https://octicons.github.com", | ||
"author": "GitHub, Inc.", | ||
"license": "MIT", | ||
"main": "dist/index.umd.js", | ||
"module": "dist/index.esm.js", | ||
"repository": "primer/octicons", | ||
"scripts": { | ||
"pretest": "npm run lint -s", | ||
"test": "jest", | ||
"start": "NODE_ENV=production next", | ||
"lint": "eslint src script", | ||
"prepare": "script/build.js && npm -s run rollup", | ||
"prepublishOnly": "../../script/notify pending", | ||
"preversion": "npm -s run prepare", | ||
"publish": "../../script/notify success", | ||
"rollup": "rollup -c" | ||
}, | ||
"keywords": [ | ||
"GitHub", | ||
"icons", | ||
"svg", | ||
"octicons", | ||
"react", | ||
"primer" | ||
], | ||
"dependencies": { | ||
"prop-types": "^15.6.1" | ||
}, | ||
"devDependencies": { | ||
"babel-preset-env": "^1.7.0", | ||
"babel-preset-react": "^6.24.1", | ||
"babel-preset-stage-0": "^6.24.1", | ||
"eslint": "^5.0.1", | ||
"eslint-plugin-github": "^1.1.0", | ||
"eslint-plugin-jest": "^21.17.0", | ||
"fs-extra": "^6.0.1", | ||
"jest": "^23.2.0", | ||
"next": "^5.1.0", | ||
"octicons": "7.2.0", | ||
"primer-react": "0.0.6-alpha.1", | ||
"react": "^16.4.0", | ||
"react-dom": "^16.4.1", | ||
"react-test-renderer": "^16.4.1", | ||
"rollup": "^0.62.0", | ||
"rollup-plugin-babel": "^3.0.5", | ||
"rollup-plugin-commonjs": "^9.1.3" | ||
}, | ||
"peerDependencies": { | ||
"react": ">=15" | ||
}, | ||
"engines": { | ||
"node": ">=8" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import Document, { Head, Main, NextScript } from 'next/document' | ||
|
||
export default class PrimerDocument extends Document { | ||
render() { | ||
return ( | ||
<html lang='en'> | ||
<Head> | ||
<link rel='stylesheet' href='https://unpkg.com/primer/build/build.css' /> | ||
</Head> | ||
<body> | ||
<Main /> | ||
<NextScript /> | ||
</body> | ||
</html> | ||
) | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is used when we call
NODE_ENV=production next
in thestart
run-script.