Welcome folks today in this blog post we will be using the react-icons
library to change the size
and color
of icons in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new react.js
project using the below command
npx create-react-app sampleapp
cd sampleapp
And now we need to install the below library
using the below command as shown below
npm i react-icons
And after that you need to edit the App.js
file and copy paste the following code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import React from 'react'; import './style.css'; import { FaAngleLeft, FaAngleRight, FaArrowLeft, FaArrowRight, FaClosedCaptioning, FaAmericanSignLanguageInterpreting, FaSearch, FaEnvelopeOpen, FaEnvelope, FaInfo, FaSitemap, FaBook, FaDonate, FaPaste, FaFolderOpen, FaFileInvoice, FaBullhorn, FaTable, FaComment, FaUniversalAccess, FaUserShield, FaWpforms, FaFacebookF, FaTwitter, FaYoutube, FaInstagram, FaChevronLeft, FaChevronRight, FaBars, FaRegEnvelope, FaUpload, FaHandPointRight, FaPlay, FaClock, } from 'react-icons/fa'; import { GrCheckmark } from 'react-icons/gr'; import { MdSubtitles } from 'react-icons/md'; export default function App() { return ( <> <div> <FaAngleLeft color="blue" size="50" /> <FaAngleRight /> </div> <div> <FaArrowLeft /> <FaArrowRight /> </div> <div> <FaClosedCaptioning /> <FaAmericanSignLanguageInterpreting /> <MdSubtitles /> </div> <div> <FaSearch /> </div> <div> <GrCheckmark /> </div> {/* icons for the transparencia pages */} <div> <FaEnvelopeOpen /> <FaInfo /> <FaSitemap /> <FaBook /> <FaDonate /> <FaPaste /> <FaFolderOpen /> <FaFileInvoice /> <FaWpforms /> <FaTable /> <FaComment /> <FaUniversalAccess /> <FaUserShield /> <FaBullhorn /> </div> <div> <FaFacebookF /> <FaTwitter /> <FaYoutube color="red" /> <FaInstagram color="" /> </div> <div> <FaChevronLeft /> <FaChevronRight /> </div> <div> <FaBars /> </div> <div> <FaRegEnvelope /> </div> <div> <FaUpload /> </div> <div> <FaHandPointRight /> </div> <div> <FaPlay /> <FaClock /> </div> <div> <FaEnvelope /> </div> </> ); } |
As you can see we can provide the size
and the color
attribute to the react-icon
as shown below
1 |
<FaAngleLeft color="blue" size="50" /> |