All right, so moving on. Uh, I think this episode in particular coming up, uh, if you want, you can treat it as optional. And here's what I mean. If I visit any of our new components, you'll see, uh, as we performed the migration, we noticed many lingering SVGs, and this is fine, but these sure are ugly. Uh, if you only reference them in one place, okay? Uh, but often what happens is maybe you need to reference it again, and then suddenly you have these

Uh, but often what happens is maybe you need to reference it again, and then suddenly you have these massive blocks of SVG litter throughout your code base. Instead, my general, uh, preference is to extract these into dedicated, uh, view components that I can then import wherever I need to. Okay? But now real quick, you're probably thinking, well, we could just reference them as images, right? Uh, yes, but then you lose so much of the flexibility, uh, that comes from using SVGs.

Uh, yes, but then you lose so much of the flexibility, uh, that comes from using SVGs. We can't control the colors, we can't, uh, transition them. We can't tweak the colors. So yeah, just my rule is turn them into dedicated components. So for example, with like button, let's just see what this is within the browser. I believe the like button is a heart. Okay? So let's extract that into a Heart component.

I believe the like button is a heart. Okay? So let's extract that into a Heart component. I'll select this whole thing. And yeah, like I said, I'm gonna call it heart. Uh, if you wanna have a convention like heart icon, that would be fine. Alright, so if we return to our resources/js directory, perhaps within components, you could have a new folder called icons, and within there you store all of your icons.

you could have a new folder called icons, and within there you store all of your icons. So in our case, heart icon, and then we paste it in. Alright, so now if I switch back to our like button, this is just much easier. Okay, so now let's import that. And now if I switch back to the browser, we still see it. Um, but yeah, I think this is an improvement. So now at this point, what I would generally do is perhaps a, uh, sitewide search for SVG tags.

So now at this point, what I would generally do is perhaps a, uh, sitewide search for SVG tags. Now I can see all of the components where we are referencing them. So for example, we have one within navigation view. All right? So yeah, what is this? Uh, I guess this is our logo, and that probably corresponds to this. Okay, well, it seems to reason I might wanna reference that elsewhere in our project.

Okay, well, it seems to reason I might wanna reference that elsewhere in our project. Maybe if we had a footer, I could place it there. Okay, so I'm gonna grab this whole thing, and in this case, this one's a little bit unique. I may not label it as icon. It's really our logo. So I would do something like this. This will be a standard view component. Okay? Let's create a new file within the components directory logo.blade.php and paste it in.

Let's create a new file within the components directory logo, view and paste it in. All right, switch back, we import it, and that should do the trick switch back to the browser. And now we get our logo. Yeah, we're just cleaning things up. That's how I like to think of this, uh, portion of the course. We're just walking through and cleaning things up. So let's go into our search.

We're just walking through and cleaning things up. So let's go into our search. Once again, we have something in post form. All right, what do we have here? Yeah, and again, just notice it's just a lot. If nothing else, it's just a lot of scrolling, which I don't love. Okay, so what is this? I don't even know. That's another problem. It's not descriptive. So let's do this. Let's select the whole thing.

That's another problem. It's not descriptive. So let's do this. Let's select the whole thing. Remove it, and I'll say stub. And let's just see, um, where this was. Okay, it's whatever was right there. So bring it back. And, and that is, okay, so it's like a little image graphic. This is when you would, uh, potentially, uh, associate an image with your Post, which I don't think they added support for. And then this one would be video. Okay?

which I don't think they added support for. And then this one would be video. Okay? So let's call this, um, imageIcon. Is that horrible within the icons directory imageIcon, paste it in. All right, uh, import that switch back. Now it works. Now we do the next one. This is gonna be our videoIcon. Once again, create this videoIcon done, and once again, import it. Alright, so now just take a look at how much better this is,

done, and once again, import it. Alright, so now just take a look at how much better this is, how much easier it is to reason about simply because we extracted those SVGs into their own file. So now notice, yeah, there's just, there's so much less scrolling and it's more clear. Now I can see. All right, the post form consists of a form and we have a label, a text area, we have a couple buttons. Looks like we have a image icon, a video icon, and a post. Like it's instantly understandable.

Looks like we have a image icon, a video icon, and a post. Like it's instantly understandable. All right, so I'm not gonna make you watch any more of this, but just rest assured behind the scenes, I'm going to continue searching for any lingering references to SVGs and I will swap them out with dedicated SVG icon components. Alright, that's done and take a look. Now within our component icons directory, I've extracted icons for bookmark, comment, heart image, and video.

I've extracted icons for bookmark, comment, heart image, and video. It's a small little tweak, it's a small adjustment, but I think it makes for a big improvement.