Adding Motion and Icons to React Project

When I was creating my project I decided to add some animation and icons to it.

For animation I used Framer Motion. To install run:

npm i framer-motion

import { motion } from “framer-motion”

Framer motion API reference docs have a production ready library. You can also check out and try my code here:

close the tag </motion.div>

For icons I used FontAwesome. To install Font Awesome run the following commands:

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Font Awesome has a huge library of icons from coffee to JavaScript.

For JavaScript import:

import { FontAwesomeIcon } from ‘@fortawesome/react-fontawesome’

import { faJsSquare } from ‘@fortawesome/free-brands-svg-icons’

To choose another icon visit their website, and follow the instructions which are very clear. In the React component pass the icon of your choice to the icon prop, indicate the color and size of the icon:

<FontAwesomeIcon icon={faJsSquare} color=”yellow” size=”3x” />

Use fa prefix for all of their icons (fa is fontawesome).

To assign the website to the icon, use <a href=”#” /> following the code above and passing the icon of your choice to the icon prop as in: