Skip to content

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

License

Notifications You must be signed in to change notification settings

RaresAil/react-ionicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

934c914 · Mar 27, 2024

History

6 Commits
Mar 26, 2024
Mar 27, 2024
Mar 27, 2024
Mar 25, 2024
Mar 25, 2024
Mar 25, 2024
Mar 25, 2024
Mar 27, 2024
Mar 27, 2024
Mar 27, 2024
Mar 27, 2024
Mar 26, 2024
Mar 25, 2024
Mar 25, 2024
Mar 26, 2024

Repository files navigation

@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 />;
}