ethstats-ui
React component library for EthStats apps
Prerequisites
- Node 8+ for development
- ES2015+ compliant browser for runtime
Installation
npm i ethstats-ui
- Copy files from
public/css
andpublic/fonts
into your root app folder and import CSS in your index.html. - Just import any component with
import { ... } from "ethstats-ui/lib/path/to/Component"
Development
npm install
npm run build
for production ornpm run watch
for development.
Project structure
📁ethstats-ui
├─📁lib - target folder for application that contains deployables
├─📁public - contains static assets that are copied to the dist folder as they are
└─📁src - source files
├─📁control - reusable ui controls and widgets
├─📁data - components for displaying and formatting various types of data
├─📁fx - Effects and animations
├─📁icon - reusable icon components (SVG or icon font wrappers)
└─📁layout - components for layout / arrangement
Managing SVG icons
Original SVG sources should be kept in the dev/original-svg
folder. To create SVG icon components from them, the following steps should be taken:
- Copy the SVG markup in the render method of a new React component
- Replace all dash (-) attributes with camelCase
- Remove any unneeded attributes or run the SVG through an optimizer tool
- The viewBox of the icon should be a square. If needed use
<g transform="translate(x,y)">
to center the icon in the new viewBox. This allows proper sizing viasize
prop - Replace the main fill/stroke color with
currentColor
, to ensure proper cascading, or parametrize if more than one color - The resulting component should be configured with a size prop that applies to both width and height