@rimble/icons

Cryptocurrency and Material icons ready for React with styled-components

Usage no npm install needed!

<script type="module">
  import rimbleIcons from 'https://cdn.skypack.dev/@rimble/icons';
</script>

README

Rimble Icons

Crypto icons and Material icons as ES6 React styled-components

yarn add @rimble/icons styled-components

// import icons individually for better tree-shaking
import { Accessibility, Eth, Btc } from '@rimble/icons'

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

// import all icons as a single component
import { Icon } from "@rimble/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

MIT License