react-animated-fa

react-social-media-icon

A beautiful and easy to use react animated font-awesome icon component.

<Icon iconUrl="fab fa-facebook-messenger" link="https://www.facebook.com/" />

Install

npm install react-animated-fa

In order to enable font-awesome icon properly, make sure adding the script below to your html file.

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
/>

Import

import { Icon } from 'react-animated-fa'

Properties

Properties	Require	Default	Description	Type
iconUrl	required		The class name of font-awesome icon. E.g. 'far fa-lightbulb'	string
link	required		Redirected link ater clicking the icon	string
size	optional	24	The size of the icon. E.g. size={30} will be 30px for the icon	number
color	optional	'rgb(0,0,0)'	The color of the icon	string
hoveredColor	optional	'rgb(255,255,255)'	The color of the icon while hovering	string
layerColor	optional	'rgb(140,0,255)'	The color of the layer on top of the icon	string
margin	optional	10	The margin around the icon container	number
padding	optional	0	The padding of the icon inside the wrapper container	number
rounded	optional	false	If true the layer will be rounded shape	boolean
bgColor	optional	null	If enable, will show the background color of the icon	string

Usage

For icon seraches, check out Font Awesome Website for icon link.

Default Icon Props

iconUrl and link are required in order to render the icon properly. The code below will render a messenger icon that link to facebook.com.

import React from 'react'
import {Icon} from 'react-animated-fa'

export const App:React.FC = () => {
    return (
        <div>
            <Icon iconUrl="fab fa-facebook-messenger" link="https://www.facebook.com/">
        </div>
    )
}

Customize Icon Props

import React from 'react'
import { Icon } from 'react-animated-fa'

export const App: React.FC = () => {
  return (
    <div>
      <Icon
        iconUrl="fab fa-facebook-messenger"
        link="https://www.facebook.com/"
        color="rgb(29, 179, 199)"
        layerColor="rgb(29, 179, 199)"
        bgColor="#f1f1f1"
        rounded={true}
      />
    </div>
  )
}

Uninstall

In your project directory, run

npm uninstall react-animated-fa

ChangeLog

• 2020/07/05 version 1.0.1 publish

License

MIT yang052513