13.09. FramerX - Coding your Icon Library

13.09. FramerX - Coding your Icon Library

(vibrant music)

Hi, my name is Meng, and welcome back
to another session of the Framer X course. Today, I wanna teach you how to create an icon library, something that is completely customized to your own list of icons, and we're going to use static data to get a list of icons from the svg code from Framer, and then apply that to the code component. So let's get started. First of all, let's go to our components, and then create a new one from code. Let's name this icon. I'm placing the VS code window on the left side using split view, and then I'm going to drag and drop from here to here. So we're gonna preview it right here. We can set it to 44 by 44. (upbeat digital music) Let's put it here. So basically, all I need to do though, is just to copy and paste the svg code. Let's go and click this graphic container. Right click on it and then get copy, copy as VG. Using that code, I'm going to replace right where it says dis props dot text along with the curly braces, like this. And then here you can save, but before saving let me just preview it. So I'm gonna save it, and voila. You should get the svg vector icon right here. If you zoom in, it's an actual vector icon. So that's for one icon. What if I want to have a list of icon, and using this code component, what if I wanna have a dropdown list of icons so that I can select the icon that I want from a custom library set in code using static data right here. Now let's start by creating an array. I'm going at line four, write const icons, which is the name of the array is equal to an array which is expressed by square brackets like this. Now here I can have a list of items. I'm going to press enter, because each item is going to hold multiple values. The first thing is the name, and then the svg code. So I'm going to use curly braces for each of them, enter, and then starting with the name-- Double quote, name, column, and then the name. So, starting with close, comma, and then svg, column,

and then put the svg code.
So I'm just gonna copy and paste the svg tag from the return using command X, and then put it right here. So this holds the first item of my list called icons. Let's add another one, using comma, and then curly braces, name. The second one is going to be following the list of icons that I have here. The second one is heart, comma, svg, and then get the code from here, (upbeat digital music) and paste right here. Now, let's do the same for the rest of the icons. I'm going to do a third one. Curly braces, name, and then I'm going to make it empty for now. Svg, and I'm not gonna put anything for now. Lemme add a comma, and then select from line 13 to line 16. So, selecting using shift. And here I'm gonna use shift option and down arrow one time, two times. So now I have one, two, and three more. Let's put the names: progress,

home, settings, get the code.
(typing) (upbeat digital music)

So now that I have my array, I can just go here and set the props as well as the states. For the prop, I'm going to set to name, and it's going to be a string. For the state, it's going to be interface, state, curly braces, svg of type any.

So type any means that it can be anything.
It doesn't have to be a string, a number, and here you can see that the value for svg is svg code, which is basically HTML. So that's why we're setting this type to any, because we're setting this state here, we're also going to apply that to our component. So comma, state, and for the default props-- First of all, let me just set the indentation properly. (clicking and typing) For the default props, I'm going to put name. For the default value, I can actually use the array, so I'm going to use the icons array, and using the brackets, I can set it to the index of zero. So that's the first square brackets, and on the second square brackets, we're gonna use the name, which is what identifies the value. Now let me explain that a little bit more. If we go to this array right here, this is our array, and because this is an array, it lists all the items one by one. So this would be one, two, three, four, five, but because it's an array it starts with zero, so zero is equal to the first result, and then one to the second result, and so on. And then inside the zero, I have the name which is a value close, and svg which is the HTML element right here. So looking at the way that we called the icons array, we're getting the first result, and we're using the identity name to get the value of it, which is close. So next we're gonna set the states. So state is equal to curly braces, svg, using the array call icons, setting the first result, and the identity is going to be svg also. So now let's see if this works. We're gonna go to our little code component right here, which is blank, and then apply the state code. So curly braces, this dot state dot svg, we should get the default icon. If you save, you'll see that the icon is appearing right here. Now, the next thing I wanna do is to be able to have a dropdown override when I select a code component. Right now it's a text, which is a string override, so I'm going to replace that. This code right here, let's name it name. It's going to be of type Enum for list. Let me just make this more readable, put this in its own line, like this.

When you're using Enum, you have the title,
but you also need to have something called options, and the options expect to have an array, but here we have an array, except that we only want to have the name value and nothing else. We don't wanna have the svg value. We need a very simple, one-dimensional array. The equivalent of that array would be something like square brackets, and then you would have close, and then the second value, heart, and if you save this, you'll see on the right side, that we have these two values that are hard-coded. But instead of having this, I wanna be able to use the arrays that I have set up earlier. So let's do that. Right after that array, which is called icons, I'm going to create a new, empty array, using var, icon names is equal to empty array. Just square brackets. I'm going to use a for loop. For, which is going to loop through a specific number of items. So, for, and then parentheses, starting with var index is equal to zero. So, starting with zero, and then semicolon, index, which is less than icons dot length, which means that I want this to start with zero, until a maximum number, which is using a count of the icons array. I'm using length to calculate how many items that I have in this array, which means five. And then in the end, using semicolon, I'm going to increment, so using index plus plus, it's going to increment by one every single time that it's looping. Curly braces. Again, starting with zero, until a maximum number of five, so less than five, because I'm starting with zero, so zero, one, two, three, four, which is five items, and then incrementing by one every single time. I'm going to use the icon names, then push so adding more content to it every single time, parentheses, add from the icons array, using the index because it's provided when you do the for loop. So index value, then square brackets again after that, using the name identity. Great, so that should give me an empty array, added with the name of each item that I have here. So that would be the equivalent of the options that I have hard-coded here, but using the actual library that I have created from scratch. So now I'm going to replace this by icon names, and if I save this and I go to the dropdown, I see my five icons. Awesome. Now that we're letting the user change the icon itself, we're getting that value, and we just need to apply it to the correct svg. So right after return, we're going to do icons, which is using the array, and then we're mapping. So for each of the items that we have in the icons array, we're going to loop through that. And now parentheses, icon, arrow, curly braces, enter.

What this means is that we're looping through
all the items inside icons, and I'm getting a value for each called icon, which we are going to use here. And this is different from how we're doing the for loop, because in for loop, you're setting a maximum number of items, versus here, we're saying, okay how many items do we have, and then we're going to look through each of them by getting the content of each item. So what we're gonna do is matching the name of the overrides, so the name that we're getting back against the array called icons. So if, parentheses, icon dot name, is equal to dis dot props dot name. So if the name that I'm getting back from the override matches against one of the items in my array, then I'll apply that to my html right here. So, let's do that and put curly braces at the end, then I'll change my state so this dot state dot svg, is equal to icon dot svg. Perfect, so that means that this dot state dot svg is gonna become the value of the svg code right here, and that can be selected from the dropdown menu. Let's test it. So I click on heart, and boom, it changes to heart. Isn't that amazing? Awesome. So, all that's left to do is just to set up the style component. I'm going to remove this, and put container instead.

And then instead of using the style here,
I'm going to replace this with a style component. So const container is equal to style dot div, double back ticks. Of course, don't forget to import the style component library. So import style from style components.

(upbeat digital music)
Let's set it to height 100%.

Let's save it.
And then we're going to use the display grid, so display grid, and align items so that it's centered.

So align is for vertical, and then justify items,

that's for horizontal.
And then save it. It should be centering now.

Cool, so that's how you basically create
your own icon library using a static list of items, that you code from scratch, using the svg code from one of the icons that you have created, and then you can use the override here to change to all of those icons. So now, putting back the close icon, I can basically put it right here to replace this component. (upbeat digital music) (clicking) And voila. You can change the icon, you can reuse this component, and you can even take your code component further by, let's say, having an API call to a list of icons that is outside of this component, and you can do so many things with Framer X using the techniques that you have learned in this course. Now, keep in mind that all the code that you have learned so far can be applied on a real project, on a real react site, and that's exactly what I'm going to teach you in the next session. So I'll see you there. (vibrant jingle)


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?