In this section we're going to continue working on our season display component in particular.
I want to think about how we're going to get those icons in there on the top left in the bottom right
sides and to just show the icons themselves.
We're going to use these semantic UI library.
Remember we've been using semantic UI quite a bit just to pull in a little bit of styling to our projects
to make them look a little bit better.
And if you go to semantic Dasch you Icom you can open up the side menu and then under the elements section
you'll find icon.
So the semantic UI library has a ton of icons included inside of it that are pretty easy to use.
When we first show you an example of how we use an icon it's going to click on definition right here
and then I will click on any one of the code little code samples and you'll see a quick example on how
to show an icon.
So we're going to use an eye tag with a class name of icon and the name of the icon we want to use in
this case it shows disabled because this is a demo of a disabled icon.
We're not showing a disabled icon.
Kind of like grayed out as it appears right there.
So we're not going to use the disabled class name so all we do is put the word icon as a class and then
the name of the icon we want to use to get the name of an icon.
I'm going to go back up to the top of the page and I'll click on the big icons button right here and
then we can scroll down and we can see all of the different icons that are available to us.
So if you mouse over any of these you'll see the name of the icon appear.
Now I already went through this list and picked out some icons for us to use.
So I can do a control after or a Command F on the page and look up snowflake and you'll see right there
that's a snowflake that looks very similar to the one that we want to show when it's winter.
And then if I do a search for sun I'll see an icon of a sun right here.
Again very similar to what we probably want to show.
And the case that it is summer.
So that's it.
Oh we really have to do here is somehow produce the names of sun or snowflake depending upon our current
season.
So to do so we can make use of a very similar expression like we just did a second ago to get our text.
I could say something like Consta icon is season equals winter.
And then that will give me either snowflake or a value of sun like so.
All right so now that we wrote both the expression to get our text and our icon out here you'll notice
that we've got this very repetitive ternary expression in both cases.
And let me put this on a single line.
So it's a little bit easier to read in both cases we thought an identical ternary.
The only difference is the values that get returned.
So I think that we could almost definitely clean this thing up a little bit but for now let's just get
the icons to show up and we'll worry about doing the factor after that.
So now that I've got the icon name inside of my div right above the H-1 I'm going to put a I with a
class name of icon like so.
And then I'll put another one after the one as well.
All right so that looks good.
So going to save this and we'll just make sure that these icons.
Oh you know what I just realized we've got one other thing here we did not put in the word icon as well
for the class name.
That was my mistake.
So to do so we can use a little bit of yes 2015.
I'm going to put in a template string by placing a back to character right here.
That tick is the traditionally on the U.S. or Northern American keyboard.
It is the character that is left to the one on your keyboard.
I'll put another back take over there and then I'm going to put a dollar sign and wrap this thing in
curly braces like so that's going to take the value of whatever icon is and throw it into the string
right here and then I'll put an icon like so.
So now we've got the name of the icon that we want to use as icon and the class name of simply icon.
And then I'm going to repeat the same thing down here as well.
OK.
So now I'm going to save this and I'll do a little quick test over here.
Back inside my browser.
All right.
I see the two icons appear.
Now they're tiny.
We'll fix that up in a minute.
But for now I'm going to say yeah this is definitely working well enough.
Let's take a quick pause.
When we come back the next section we're going to start to make sure these icons show up a bit larger.
We're also going to start to a refactor these kind of duplicated ternary expressions as well.
So quick pause and I'll see you in just a minute.