react-octicon

A GitHub Octicons icon React component

Github stars Tracking Chart

react-octicon

Travis
npm package
Coveralls

A React component which renders an icon using the GitHub Octicons icon font.

All Octicons

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 or 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 is required in order to use this component.

Install and use the Octicon component like so:

npm install --save react-octicon
import React from 'react'
import {render} from 'react-dom'
import Octicon from 'react-octicon'

let App = () => <div>
  <Octicon mega spin name="sync"/>
</div>

render(<App/>, document.querySelector('#app'))

Usage with nwb

If you use 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
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 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

Main metrics

Overview
Name With Ownerinsin/react-octicon
Primary LanguageJavaScript
Program languageCSS (Language Count: 2)
Platform
License:Other
所有者活动
Created At2015-06-30 21:40:33
Pushed At2017-12-01 10:29:41
Last Commit At2017-12-01 20:29:32
Release Count6
Last Release Namev3.0.1 (Posted on )
First Release Namev1.0.0 (Posted on )
用户参与
Stargazers Count74
Watchers Count3
Fork Count8
Commits Count18
Has Issues Enabled
Issues Count4
Issue Open Count2
Pull Requests Count1
Pull Requests Open Count0
Pull Requests Close Count2
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private