automattic / genericons-neue-react

React Components for using icons from Genericons Neue

Genericons Neue for React

A library to make it easy to use Genericons Neue within React. You only need to import the icons you use, so no extra overhead.

Usage

Here's an example on using within your React project.

1. First install the package

$ npm install --save genericons-neue-react

2. Using inside a Component

import React from 'react';
import CloudUpload from 'genericons-neue-react/icons/cloud-upload';

const MyUploadButton = () => {
    return (
        <button>
            <CloudUpload />
            <span> Upload a new image </span>
        </button>
    )
}

You can also pass down any properties to the SVG, for example:

import React from 'react';
import CloudUpload from 'genericons-neue-react/icons/cloud-upload';

const MyUploadButton = () => {
    return (
        <button>
            <CloudUpload fill="tomato" />
            <span> Upload a new image </span>
        </button>
    )
}

Building this Package

The following info is for creating this package, if you just want to use the icons in your project, see Usage above.

The source SVG files are from automattic/genericons-neue repository, which gets installed as a dev dependcy.

The convert.js script runs through the SVG files and creates React Components (jsx), using the filename as the component name. Component names are CamelCase so cloud-upload.svg becomes CloudUpload.

This build step can be run using: npm run build and creates the components in src directory.

Next we convert the JSX components in src directory to vanilla javascript using babel and store the results in icons directory.

genericons-neue-react's Issues

Publish non-jsx files

This project contains .jsx so requires a babel transform step for any project that uses it. Commonly, tools like webpack are configured to ignore source files in node_modules.

Should we also provide vanilla js versions of the icons in this project?

For instance, usually the webpack loader for babel is configured like this:

{ test: /\.jsx?$/, exclude: /node_modules/, loaders: [ 'babel-loader' ] },

However, if this project is installed as a dependency, the source files will not be transformed from the jsx to a browser compatible version unless the exclude is modified:

{ test: /\.jsx?$/, exclude: /node_modules\/(?!genericons-neue-react)/, loaders: [ 'babel-loader' ] },