react-ionicons-icon

Implementation of Ionicons icons in react components

Usage no npm install needed!

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

README

React ionicons icon

Made with create-react-library

NPM JavaScript Style Guide

react-ionicons-icon is a collection of Ionicons icons in react component.

Generating react component from ionicons svg files, this project is based on the blog post https://emasuriano.com/blog/building-a-maintainable-icon-system-for-react-and-react-native source code of the blog can be found on https://github.com/EmaSuriano/maintainable-icon-system-react

Ioniocns description:-

Icon Library License Version
Ionicons MIT 5.2.3

Install

npm install --save react-ionicons-icon

Usage

import React, { Component } from 'react'

import { 
  Accessibility, // Filled Icon
  AccessibilityOutline, // Outlined Icon
  AccessibilitySharp, // Sharp Icon
  } from 'react-ionicons-icon';

import 'react-ionicons-icon/dist/index.css' // Optional, changes all outlined svg strock color

class Example extends Component {
  render() {
    return <Accessibility />
  }
}

For using other icons refer to Ionicons. Example:-

<ion-icon name="battery-full"></ion-icon> // Becomes <BatteryFull />
<ion-icon name="battery-full-outline"></ion-icon> // Becomes <BatteryFullOutline>
<ion-icon name="battery-full-sharp"></ion-icon> // Becomes <BatteryFullSharp />

Size

To change size of the svg icon use size props:

<Accessibility size="32px">

API

Key Default Descripton
size 32px Icon size
fill #373737 Icon filling color

License

MIT © Simonbelete