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" />;
See the icon list for a complete list of all icons available
Prop | Type | Description |
---|---|---|
size |
number | width and height in pixels |
color |
string | fill color, uses Styled System's [color ][color] function |
yarn install
The build process will:
- Parse the
material-design-icons
package for SVG source code - Parse the
crypto-icons
repo folder - Copy all the icons to the
svg/
folder - Run svgr over all icons to wrap in a react template with styled-system props
- Replace default color prop with original background color for token icons
- Create index files that imports all icons per directory
- Create an
examples/
folder for tests and development - Run Babel on the
src/
folder and output tolib/
for CommonJS compatible icons - Run Babel on the
src/
folder and output toes/
for ES6 compatible icons
To run the development server:
- First navigate to the
demo
directory - Install all the dependencies for the demo
- Run the demo app
cd demo
yarn install
yarn start
Should start a local web server that displays all the icons