xxxxxxxxxx
// Like this
<FaFacebookF color="white" fontSize="1.5em" />
xxxxxxxxxx
import { FaReact } from 'react-icons/fa';
const MyComponent = () => {
return (
<div>
<FaReact color="red" size={30} />
</div>
);
};
export default MyComponent;
xxxxxxxxxx
// Use IconContext as mentioned in the Docs.
// https://github.com/react-icons/react-icons#configuration
function BlueLargeIcon() {
return (
<IconContext.Provider
value={{ color: 'blue', size: '50px' }}
>
<div>
<FaBeer />
</div>
</IconContext.Provider>
);
}
xxxxxxxxxx
import { IconName } from 'react-icons/icon-package'; // Import the desired icon from the react-icons library
import './App.css'; // Import your CSS file
function App() {
return (
<div>
{/* The Icon component */}
<IconName className="custom-icon" />
</div>
);
}
xxxxxxxxxx
import React from 'react';
import './Icon.css'; // Import CSS file for icon styling
const Icon = () => {
return <i className="custom-icon"></i>;
}
export default Icon;