https://github.com/insin/react-octicon
A GitHub Octicons icon React component
https://github.com/insin/react-octicon
octicons react react-component
Last synced: 9 months ago
JSON representation
A GitHub Octicons icon React component
- Host: GitHub
- URL: https://github.com/insin/react-octicon
- Owner: insin
- License: other
- Created: 2015-06-30T21:40:33.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-12-01T10:29:41.000Z (over 8 years ago)
- Last Synced: 2025-09-07T05:33:34.968Z (10 months ago)
- Topics: octicons, react, react-component
- Language: JavaScript
- Homepage: https://insin.github.io/react-octicon/
- Size: 177 KB
- Stars: 73
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## react-octicon
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
A [React](https://facebook.github.io/react/) component which renders an icon using the [GitHub Octicons](https://octicons.github.com/) icon font.
> **Note:** Github Octicons has switched from providing an icon font to being a library for generating SVG markup for string templating engines, so this component uses the last version which provided an icon font, version 4.
>
> As such, the available icons and their appearance may not match with what's on the Github Octicons documentation site.
>
> If you want to use the latest version of GitHub Octicons, try [react-octicons](https://github.com/philschatz/react-octicons) or [react-icons](https://github.com/gorangajic/react-icons) instead, both of which provide a React component for each icon which renders an SVG.
### Demo
https://insin.github.io/react-octicon/
### Usage
**Note: [Webpack](https://webpack.js.org) is _required_ in order to use this component.**
Install and use the Octicon component like so:
```
npm install --save react-octicon
```
```js
import React from 'react'
import {render} from 'react-dom'
import Octicon from 'react-octicon'
let App = () =>
render(, document.querySelector('#app'))
```
#### Usage with nwb
If you use [nwb](https://github.com/insin/nwb) to build and serve the React app you're using this component in, it will automatically configure Webpack to handle CSS, image and font dependencies for you.
#### Usage with Webpack
This component handles the Octicons CSS dependency for you, but you must use Webpack and configure it to handle CSS and associated font and image files.
For example, using the following webpack loaders:
```
npm install --save-dev css-loader file-loader style-loader
```
```js
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(eot|otf|svg|ttf|woff|woff2)$/,
use: 'file-loader'
}
]
}
```
See Webpack's [Loading CSS documentation](https://webpack.js.org/guides/asset-management/#loading-css) for more info.
### Required props
Prop | Description
---- | -------------
`name` | The name of an icon in the Octicons set, e.g. `'trashcan'`
### Other props
Prop | Description
---- | -------------
`className` | An additional class name for the element rendered by the component
`mega` | If `true`, a double-size icon will be displayed
`spin` | If `true`, the icon will spin
Any additional props given, such as event handlers or `aria-*` attributes, will be passed to the element rendered by the component.
## MIT licensed
[build-badge]: https://img.shields.io/travis/insin/react-octicon/master.svg?style=flat-square
[build]: https://travis-ci.org/insin/react-octicon
[npm-badge]: https://img.shields.io/npm/v/react-octicon.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-octicon
[coveralls-badge]: https://img.shields.io/coveralls/insin/react-octicon/master.svg?style=flat-square
[coveralls]: https://coveralls.io/github/insin/react-octicon