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