Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

React.js react-icons Example to Change Size and Color in Browser Using Javascript

Posted on February 15, 2023

 

 

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

 

 

JavaScript
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

 

 

JavaScript
1
<FaAngleLeft color="blue" size="50" />

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme