react-fontawesome-svg-import

Generates a Reactjs module from Font Awesome raw svgs. The generated module is of the format (classNames are based on Tachyons)

// Generated by the script:
import React from "react";
const SVG = ({ className, ...rest }) => (
  <span
    className={`${className || ""} inline-flex h--1em w--1em svgwrapper`}
  >
    <svg className="h--1em w--1em fill-current" {...rest} />
  </span>
);
const SlackHashBrands = ( {className} ) => <SVG className={className || } ... ><path .... /></SVG>;
const ArrowAltUpLight = ( {className} ) => <SVG className={className || } ... ><path .... /></SVG>;

export {
  SlackHashBrands,
  ArrowAltUpLight,
}

I.e. the modules are a module case (like camelcase, but the first letter is a capital... not sure what this is called) concatenation of their file name and their parent directory. For example .../brands/slack-hash.svg gets the name SlackHashBrands.

Example Usage

Example Directory Structure

├── scripts
│   └── generate-svg-components.js
├── src
│   ├── components
│   │   └── SVGIcon.js // <-- used in the example
│   ├── icons
│   │   ├── SVGs.js // <-- generated
│   │   ├── brands
│   │   │   ├── bitbucket.svg
│   │   │   ├── github-alt.svg
│   │   │   ├── github-square.svg
│   │   └── light
│   │       ├── address-book.svg
│   │       ├── address-card.svg

In root you'd run node ./scripts/generate-svg-components.js -i src/icons/ -o src/icons/SVGs.js which would generate the SVGs.js file.

Example Component

// src/components/SVGIcon.js
import React, { Component } from "react";
import { ImageLight } from "../icons/SVGs";

class SVGIcon extends Component {
  render() {
    const {
      type = "regular",
      name = "image",
      IconClass = ImageLight,
    } = this.props;
    return (
      <span
        className={`${this.props.className ||
          ""} inline-flex h--1em w--1em svgwrapper`}
      >
        <IconClass className="h--1em w--1em fill-current" />
      </span>
    );
  }
}

export default SVGIcon;

// src/components/IconsInUse.js
import React, { Component } from "react";
import SVGIcon from "./SVGIcon";
import { AddressBookLight, GithubAltBrands } from "../icons/SVGs";

class App extends Component {
  render() {
    return (
        <div className="makeIconBigUsingFontSize makeIconRedUsingTextColor">
          <SVGIcon IconClass={AddressBookLight} />{" "}
          <SVGIcon IconClass={GithubAltBrands} />{" "}
        </div>
      </div>
    );
  }
}

export default App;

Useful styles to enable icon-fonts-style scaling with text size:

// styles.css

.heightAdjust { height: 1em }
.widthAdjust { height: 1em }
.fillCurrent { fill: currentColor }
.displayInlineFlex { display: inline-flex }
.makeIconBigUsingFontSize { font-size: 200px }
.makeIconRedUsingTextColor { color: red }

TODO

• Turn into npm module.
• Handle errors.
• Process output through prettier.
• Maybe webpack plugin...