https://github.com/raresail/react-ionicons

This packages uses the svg icons from ionic-team/ionicons and builds them as React Components to be used in the application
https://github.com/raresail/react-ionicons

components icons ionic ionic-framework ionicons ionicons-icons react

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/raresail/react-ionicons
• Owner: RaresAil
• License: apache-2.0
• Created: 2024-03-25T08:38:46.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-27T12:52:51.000Z (10 months ago)
• Last Synced: 2024-11-27T21:41:39.787Z (about 1 month ago)
• Topics: components, icons, ionic, ionic-framework, ionicons, ionicons-icons, react
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@raresail/react-ionicons
• Size: 496 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @raresail/react-ionicons

### The current version uses the ionicons version `7.3.0`

This packages uses the svg icons from [ionic-team/ionicons](https://github.com/ionic-team/ionicons) and builds them as React Components to be used in the application

### Usage

Install the module

```bash

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

```

```bash

yarn add @raresail/react-ionicons;

```

Import the icons

```ts

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

```tsx

function Component() {

  return (

    

  );

}

```

### 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

```tsx

function() {

  return ;

}

```

#### Beat

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

```tsx

function() {

  return ;

}

```