react-ionicons

A React SVG ionicon component

Usage no npm install needed!

<script type="module">
  import reactIonicons from 'https://cdn.skypack.dev/react-ionicons';
</script>

README

A React Ionicon Component

Beautiful doc in https://react-ionicons.netlify.app/

Install

$ npm install --save react-ionicons

or

$ yarn add react-ionicons

Usage

import React from 'react'
import { render } from 'react-dom'
import { LogoNodejs } from 'react-ionicons'

<LogoNodejs
  color={'#00000'}
  rotate
  height="250px"
  width="250px"
  onClick={() => alert('Hi!')}
/>

Browserify

browserify is supported, but you have to install browserify-css@^0.12.0 manually.

Features

  • SVG Icons.
  • Simple API.
  • Animations.
  • Customizable.
  • Support to Create React App.
  • Typescript support.

API:

Param Type Description Example
height String Icon size. Allow all units (px, em, %, pt...). height="22px"
width String Icon size. Allow all units (px, em, %, pt...). width="22px"
color String Icon color. Allow string (blue, red, cyan...), rgb, rgba and hexadecimal colors. color="#C9C9C9"
title String Tooltip for the icon title="this is a tooltip"
cssClasses String Pass a string with cssClasses cssClasses="myButton"
rotate Boolean Apply rotate animation to icon rotate={true}
shake Boolean Apply shake animation to icon shake={true}
beat Boolean Apply beat animation to icon beat={true}
onClick Function Pass a function to execute onClick onClick={() => console.log('Hi!')}
style Object Pass a style object style={{ verticalAlign: 'middle' }}