ba-js-icon

ba-js-icon is a set of common React icon components. SVG icons provide the raw material. SVGR is leveraged to create component equivalents.

Installation

yarn add ba-js-icon

Documentation

SVG source files are stored in assets/icons (new icons are added here). The build process converts these to React components (src/icons) and transpiles them to ES5 (lib/icons). An auto-generated icon index (lib/icons/index.js) serves as the project entry point.

├── assets
│   └── icons
├── lib
│   └── icons
│       └── index.js
├── scripts
│   └── generate-icons.js # SVGR custom template
└── src
    └── icons

Build

yarn build

Usage

import { Arrow } from 'ba-js-icon'

export function StandardArrow() {
  return (
    <div>
      <Arrow /> // arrow will be colour and size of surrounding context
    </div>
  )
}

export function LargeGreenArrow() {
  return (
    <div style={{ fontSize: '54px', color: 'green' }}>
      <Arrow /> // arrow will be green and 54px
    </div>
  )
}

// .foo {
//   color: red;
//   font-size: 5em;
// }

export function LargeRedArrow() {
  return (
    <div>
      <Arrow className="foo" /> // arrow will be red and 5em
    </div>
  )
}

FAQ

Why SVG?

https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/

https://css-tricks.com/icon-fonts-vs-svg/