@hyperapp font-awesome Icon component

description.md

@hyperapp font-awesome Icon component

As you may know font-awesome 5 package now distributed as several packages:

• @fortawesome/fontawesome, all the functionality for generating icons but none of the content
• @fortawesome/fontawesome-free-solid, 'solid' icons content (the same for 'regular' and 'brands' icons)

Furthermore there are shakable hooks for each content package to build only used icons content (tree shaking).

And it is awesome!

More info about FA5: https://fontawesome.com/how-to-use/use-with-node-js

Anyway, @fortawesome/fontawesome (without icons content) usage increases your bundle up to 100kb (+30kb minified). Yikes!

We are going to be minimal, and will use only icons' content and hyperapp:

Icon.js

import { h } from 'hyperapp';

export default (props) => {
  const {
    src: {
      icon: [
        iconWidth,
        iconHeight,
        , ,
        iconPath,
      ],
      iconName,
      prefix: iconPrefix,
    },
    name = iconName,
    className = 'icon',
    viewBox = `0 0 ${iconWidth} ${iconHeight}`,
    prefix = iconPrefix,
    path = iconPath,
  } = props;

  return <svg
    xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true"
    role="img"
    data-icon={ name }
    data-prefix={ prefix }
    class={ className }
    viewBox={ viewBox }
    >
      <path fill="currentColor" d={path}></path>
    </svg>;
};

layout.jsx

import Icon from './Icon';
// To use shakable hook from icons content package
// import { faAnchor } from '@fortawesome/fontawesome-free-solid/shakable.es';
import faAnchor from '@fortawesome/fontawesome-free-solid/faAnchor';

export default props => <div>
  <Icon src={faAnchor} className="someClassName" />
</div>