Nested Public Modules

    react-octicon

    3.0.1 • Public • Published

    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.

    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

    Install

    npm i react-octicon

    DownloadsWeekly Downloads

    68

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • insin