Using the React Icons NPM package
Install it like so:
npm install react-icons --save
Use it like so:
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
Note that 'fa' indicates that it is a FontAwesome icon. The react-icons package comes with many icon sets.
Here's more info on the icon sets
Here's another example that adds logic attributes/props to an icon:
import { useState } from 'react';
import {AiFillHeart, AiOutlineHeart} from 'react-icons/ai'
const Like = () => {
const [status, setStatus] = useState(false);
return status ? <AiFillHeart color="blue" size={20} onClick={()=> setStatus(false)} />
: <AiOutlineHeart size={20} onClick={()=> setStatus(true)} />
}
export default Like
The icons will toggle when you click on them.