PIPELINE Icons

Crypto icons and Material icons as ES6 React styled-components

yarn add @pipeline-ui/icons styled-components

// import icons individually for better tree-shaking
import { Accessibility, Algo, Btc } from '@pipeline-ui/icons'

const App = props => (
  <Accessibility
    size={32}
    color='tomato'
  />
  <Algo />
  <Btc />
)

// import all icons as a single component
import { Icon } from "@pipeline-ui/icons";

const App = props => <Icon name="Accessibility" size={32} color="tomato" />;

List of Icons

See the icon list for a complete list of all icons available

Props

| Prop | Type | Description | | ------- | ------ | ---------------------------------------------------------- | | size | number | width and height in pixels | | color | string | fill color, uses Styled System's [color][color] function |

Contributing

yarn install

The build process will:

1. Parse the material-design-icons package for SVG source code
2. Parse the crypto-icons repo folder
3. Copy all the icons to the svg/ folder
4. Run svgr over all icons to wrap in a react template with styled-system props
5. Replace default color prop with original background color for token icons
6. Create index files that imports all icons per directory
7. Create an examples/ folder for tests and development
8. Run Babel on the src/ folder and output to lib/ for CommonJS compatible icons
9. Run Babel on the src/ folder and output to es/ for ES6 compatible icons

To run the development server:

1. First navigate to the demo directory
2. Install all the dependencies for the demo
3. Run the demo app

cd demo
yarn install
yarn start

Should start a local web server that displays all the icons

Related

• RMDI
• Google Material Design Icons
• Pixo
• Styled Components
• Styled System
• React Icons
• Cryptocurrency Icons

MIT License