@raresail/react-ionicons

The current version uses the ionicons version 7.3.0

This packages uses the svg icons from ionic-team/ionicons and builds them as React Components to be used in the application

Usage

Install the module

npm install --save @raresail/react-ionicons;

yarn add @raresail/react-ionicons;

Import the icons

import { AddCircleOutline } from '@raresail/react-ionicons';

Use the icon, to change the size of the icon use the font-size CSS property and for the color (fill or stroke) use the color CSS property

function Component() {
  return (
    <AddCircleOutline
      // To change any style related to the svg, font size or color
      style={{
        fontSize: '20px',
        color: 'red'
      }}
      // For icons that use strokeWidth you can change it like this
      strokeWidth={32}
      // to add a class name to the svg
      className="your class"
      // All the props are forwarded to the SVG component
    />
  );
}

Props

| Name | Type | Default | | ----------- | ---------------- | -------- | | style | CSSProperties | {} | | strokeWidth | number | string | 32 or 16 | | className | string | | | ... | Other SVG Props | |

Animations

Spin

To spin a icon add the spin prop, if you want to adjust the speed, use the animation-duration css property

function() {
  return <SyncOutline spin />;
}

Beat

To spin a icon add the beat prop, if you want to adjust the speed, use the animation-duration css property

function() {
  return <SyncOutline beat />;
}