Up next in 10
Build a React.js Material and SVG Icons and FontAwesome Icons Using react- icons Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we'll be looking at a
0:04
react JS Library which is very helpful
0:06
for icons material icons you can see on
0:09
your screen you will be having all these
0:11
types of material icons if you want to
0:14
use it inside your project you can use
0:16
this package the package name is if you
0:19
go to npmjs.com and just search for this
0:22
package react D
0:25
icons so this is actually the name of
0:28
the package and it basically have SVG
0:31
react icons of so almost 2 million
0:34
weekly downloads are there this is
0:36
actually the command to install this
0:38
I've already installed the package so I
0:41
will actually show you how to import
0:44
this and how to get started with so
0:46
first of all you need to import this
0:50
module using the import statement
0:54
so we have font font awesome icons
0:57
material icons available so you can use
1:00
the phont awesome icons by using fa and
1:03
all these icons are available you can
1:06
see use this fa beer and Fa coffee
1:11
icon and all this will be coming from
1:14
react
1:17
icons slash and then we have various fa
1:21
phone aome you can see how many
1:24
providers are there it's a pretty big
1:27
package and similarly if you want the
1:30
material icon we put MD and Then
1:33
followed by the icon which is
1:35
alarm so again it will be coming from
1:38
react icons slmd for
1:42
material so now to display these icons
1:45
it's very
1:48
easy so right here we put our
1:53
icon we need to provide this icon
1:56
context
2:00
so this will be imported from the react
2:02
icons so this context is provided by
2:05
this
2:08
package so here you need to
2:11
provide the provider here which is this
2:15
one and here you need to provide the
2:18
configuration settings for your icons
2:20
such as the color of the icon so color
2:22
can be blue and I can set the size of
2:25
the icon to be 2 em and inside this we
2:28
will have the div
2:34
section so then we can align these icons
2:37
let's suppose in the center position so
2:39
we can simply
2:44
say margin top 50
2:48
pixel so we can have an heading here
2:51
which is react
2:53
icons example and
3:00
here are some icons with default
3:06
Styles so now to display those icons we
3:09
can use simply display displayed this
3:11
like this and here we can simply
3:15
provide the phone size to be almost 5 MB
3:20
if you refresh your
3:28
browser so this is actually the be icon
3:30
you will see that it's in blue color you
3:33
can change the color as well if I change
3:36
to red so it will appear in the red
3:41
color so in the similar way you can
3:46
even let's grab a beer and then we can
3:51
have a coffee
3:54
icon or maybe
4:01
so this is you can see it's a beer icon
4:04
and this is a coffee
4:11
icon we change to Black here you will
4:13
see that so you can change the colors
4:17
customize the look and feel of the icon
4:18
as well it's very
4:21
easy and then we also have the some
4:23
material icons as
4:25
well if you want to integrate your
4:28
material icons then we can simply
4:31
write this is the
4:37
MD so this is your material icon if you
4:43
see so this is basically the react icons
4:47
package guys if you want to integrate
4:49
some icons this is a very good library
4:51
or package in react sh specifically
4:54
almost 2 million weekly downloads so
4:56
this is actually the command to install
4:58
this so thank you very much for watching
5:00
this video and do check out my website
5:02
as well free mediat tools.com which
5:04
contains thousands of free tools
5:06
regarding audio video and MH and I will
5:09
be seeing you in the next video
#Consumer Electronics
#Software