WEBVTT

00:00.000 --> 00:04.480
Hello guys, today in this tutorial I will
be showing you a new library inside React

00:04.480 --> 00:10.800
which allows you to basically render or generate
scg icons of various file types such as pdf

00:10.800 --> 00:15.880
html, doc, word document files, so all the
extensions of files which are there inside

00:15.880 --> 00:20.480
internet basically it allows you to render
out a scg icon without having to download

00:20.480 --> 00:27.200
it from any prototype. It has the prebuilt icons, you
can see these are the icons of different file types, word

00:27.200 --> 00:35.080
document files, pdf, mp3, mp4, so all the
important file extensions have their own icons

00:35.080 --> 00:43.960
you will see that, color schemes, it's very good. You don't need to
basically download these icons from third party websites, this is basically

00:43.960 --> 00:50.480
a library which has prebuilt icons, you can
display this, it's a scg image, scalable vector

00:50.480 --> 00:56.840
graphics, it's not an icon, it's not an image,
it's a scg icon that we are displaying right here

00:57.280 --> 01:02.200
So this is basically the package, I have given
all the source code guys in the description

01:02.200 --> 01:06.880
of the video, so you can go to the
description, copy paste all the source code

01:06.880 --> 01:15.000
So the library that we are using is a simple
node package, npmjs if you go to and search

01:15.000 --> 01:26.760
for this package, and it's got almost 36,000 weekly
downloads, you can basically have customized

01:26.760 --> 01:34.760
all these properties, you can read the documentation,
and to install it, this is basically the command

01:34.760 --> 01:41.120
here npm i react file icon, so now you integrate
this inside your application, it's very easy

01:41.120 --> 01:56.720
let me just show you. First of all, let me make functional
component, so you will see hello world will be rendered

01:56.720 --> 02:03.240
out, hello world, so now in order to basically
import this library guys, it's very simple

02:03.240 --> 02:13.440
you need to simply say, two things you need
to import, file icon and the default style

02:13.440 --> 02:25.280
and this we can import using react file icon, and
instead of hello world guys, we will basically

02:25.280 --> 02:33.120
embed this file icon, and it basically takes
two options, first is the extension, so whatever

02:33.120 --> 02:38.680
extension that you need to say, so I will
say docs, do your worst document, and then

02:38.680 --> 02:47.680
we need to say the default styling, so default
styles, that's all, and for the, it has various

02:47.680 --> 02:54.640
extensions, you will see that, so here we
need only docs, so you will see what document

02:54.640 --> 03:00.320
will be displayed here, this is the icon,
it's a html icon, you can't save it inside

03:00.320 --> 03:08.100
a computer, it's pre-describable vector graphics,
and you can even try it, let's suppose you

03:08.100 --> 03:26.900
need to give it a width of 80px, height of
80px, so now, I think you need to surround

03:26.900 --> 03:36.540
this, this style will go here, not here, so
now you can see, 80px, it is now looking good

03:36.540 --> 03:44.340
here, similarly we can have for pdf as well,
you can embed multiple icons here, you can

03:44.340 --> 03:58.780
have for pdf, and you can have for ppt, so
you can see pdf, ppt, all the design keys

03:58.780 --> 04:04.820
that you see right here, it is word document,
you are familiar with word document extension

04:04.820 --> 04:13.180
icons, pdf is something like this, and ppt is
something like this, and you can even change

04:13.180 --> 04:16.980
the styling, if you don't like the styling,
you can change the color property, you can

04:16.980 --> 04:24.219
basically, default is white smoke, you can
change the color, let's suppose I need to

04:24.219 --> 04:38.580
change it to green, and if you refresh here,
I think you need to just remove this, now

04:38.580 --> 04:46.140
you can see that, you can even change color as
well, so you can just have your own customized

04:46.140 --> 04:57.140
colors, accordingly pink color, you can see
that, and violet, you can see that, and now

04:57.140 --> 05:03.659
guys, you can just use the documentation,
extension, fold, fold color, all this, you

05:03.659 --> 05:08.900
can just customize it, I will not show it,
and now if you want to basically loop through

05:08.900 --> 05:16.900
all the icons which are available, what you
can do is that, so right here you can import

05:16.900 --> 05:29.900
this line, which is offset keys, default tiles,
and right here basically, you can loop through

05:30.900 --> 05:38.900
let me don't waste your time, and paste this
code, so you can find this code in the description

05:38.900 --> 05:45.900
of the video, so this will loop through all
the icons, and it will display it inside the

05:45.900 --> 05:54.900
browser, so we are given display flex wrap,
and heighten class 85px, we are using the

05:54.900 --> 06:00.900
map method, file icons, it's the array here,
for each icon you are displaying this, and

06:00.900 --> 06:09.900
if you see, you will see that, so it's a great
library guys, if you want to embed items of

06:09.900 --> 06:13.900
different file types, thank you very much
for watching this video, and all the source

06:13.900 --> 06:15.900
code is given in the description of the video