Here's another practical Vue component you might create. So take a look here. We have an AchievementsList component, and as it turns out, this is a real-life component that renders your achievements on the Laracasts form. Okay. But I'd like to point your attention right here. So we can see we're setting the HTML of this div equal to the icon for the current achievement. Okay, a little confusing, but we can figure it out. So it's calling a method named icon, and that method is using a dynamic require to pull in the HTML for that SVG, and then it quickly updates the title using a regular

So it's calling a method named icon, and that method is using a dynamic require to pull in the HTML for that SVG, and then it quickly updates the title using a regular expression. Okay, so now we can see right here we're spitting out an inline SVG for the achievement. And sure enough, if I take a look at one of these, there we go. We get that full SVG. Okay. Fair enough. But is there another, maybe a slightly more clean way we can go about this? Well, we keep talking about SVGs, but it's not referenced anywhere here.

But is there another, maybe a slightly more clean way we can go about this? Well, we keep talking about SVGs, but it's not referenced anywhere here. Why don't we say what it is? I want an inline SVG. So we'll create it. Okay, so I'm going to comment this out, and we'll see if we can make this work. The first step is to create that component. Resources/js/components/InlineSvg.vue. Now we could create it as a traditional single file view component where we have a template, a script, and style tags.

Now we could create it as a traditional single file view component where we have a template, a script, and style tags. However, I'm going to show you a different way using render functions. So instead I'll give it a traditional .js extension. Okay, so if I switch back, we need to import it. inline.svg.from, and I'm just going to go up to my components directory and grab it. Finally, I can register it as a child component. Alternatively, this is really a good use case for a global view component. Okay, so if I save it and come back to Chrome and refresh, let's see. Let's go to the console tab.

Okay, so if I save it and come back to Chrome and refresh, let's see. Let's go to the console tab. Oh, failed to mount component. Template or render function has not been defined. Okay, that's our next step. So we've decided we're going to use a render function. So as it turns out, you may not even be familiar with this, and that's because in most cases you will use templates for your view components. However, there are some situations where it actually ends up being cleaner to drop down a level and use the render function instead.

However, there are some situations where it actually ends up being cleaner to drop down a level and use the render function instead. So for example, this will accept a parameter. Sometimes you'll see it called createElement. Sometimes it'll simply be h, which is a common convention. And by the way, if you're curious, h stands for hyperscript, which is effectively a script that generates an HTML structure. So it's appropriate and quick. Okay, so anyways, we could generate as an example an h1 that says hello world here. And now if I come back to Chrome and give it a refresh, sure enough, you'll see it right.

Okay, so anyways, we could generate as an example an h1 that says hello world here. And now if I come back to Chrome and give it a refresh, sure enough, you'll see it right there. Let's take a look. You'll see we have two inline SVGs, each of which at the moment is simply an h1. Okay, so let's think about what we would need here. It sounds like if I need an inline SVG, I have to give it the file name, right? So I could say achievement.icon. So this is an object. The icon will be the name of the SVG file that we need to load.

So this is an object. The icon will be the name of the SVG file that we need to load. Okay, sounds like we need to accept that. Next, we'll do this in a couple steps. But to begin, we need to require that. So I can go into, and we're just going to assume all SVGs are stored in the same directory. If that's not the case, of course, you can adjust this however you need to. And we'll grab the name. Okay, so this will pull in that SVG. And behind the scenes, I've already instructed Webpack to, we don't need to cover it, but

Okay, so this will pull in that SVG. And behind the scenes, I've already instructed Webpack to, we don't need to cover it, but I've instructed Webpack to use what we call an HTML loader that will convert that SVG into a module that can be read. That's very much an aside. If it's confusing, don't worry about it at all. So now we'll say, if I console.log that SVG, and if I come back to Chrome, you'll see that now, if we reload the page, sure enough, we did pull in the structure for the given SVG. Okay, so now, at this point, here's what we could do.

file. Okay, so what next? Well, one thing you'll often want to do is set a particular attribute on the SVG. So for example, what if I wanted to give this a class? You'll see here, if I were to set it to red, that will actually affect the background color for this particular SVG. So it would be useful to set that. Now, what you might think is I'll just do it here. I could say class equals foobar. However, that's not going to work the way we expect.

So imagine this. We're going to give it classes, and I'll just pass in that red color once again. Okay. Now, we're going to accept it. And then here, if SVG is a string, then I could simply say replace the opening SVG tag with a new one where we set the class. Like so. I think that should do it. Okay. So hopefully, that should make good sense.

So instead, I'd rather interact with this as if it was an existing DOM element. But because it's not, we only have a string here, I'm going to convert it into a DocumentFragment. And that way, I can interact with it in a more object-like way. Here's how. Say document.createDocumentFragment(). Think of this sort of like a node fragment that is separate from the DOM. It's not going to show up on the page. It's separate, almost like a snippet. So I could say let fragment here.

It's separate, almost like a snippet. So I could say let fragment here. And what we effectively want to do is set the innerHTML of this fragment equal to the SVG. But I can't do this. I can't say innerHTML equals SVG. It doesn't work that way. But it could work if we apply that to a div. So let's do this. document.createElement('div').

So let's do this. document.createElement div. And then here, I could set the innerHTML equal to the SVG. So now you have a fragment. You have a div DOM node that has the correct innerHTML. So the only remaining step is to say appendChild this child to the fragment. Like so. Okay. So now I will hold off on this for just a moment because I want to show you what this looks like.

So now, yeah, I'm using an object-oriented approach versus a simple regular expression on a string. So if we come back and give that a refresh one more time, you'll see right here the SVG now has the class foobar. Okay. So let's start getting cleaned up here. So let's say set up a div, then set up a fragment, then append the div to the fragment, and then this will ultimately take the place of what we had earlier here. Find the SVG and add this.classes to it. So now think about it.

So again, we're going to clean this up shortly, but to quickly show you the pattern. Let's give it a shot. I'll switch back. We're going to set the class. We're going to set the width to 100 or 50 pixels, and the same for the height. All right. So did we compile? Oh, we have a little issue here. Looks like I didn't reference that correctly. There we go.

Looks like I didn't reference that correctly. There we go. Okay. So now we could just say fragment.querySelector SVG, and then we'll get the outer HTML to get that full HTML string there. So come back. It doesn't look good. That doesn't matter. The main idea is to show that we can manipulate these SVGs that are being dynamically loaded on the fly.

And then here I could set the classes. And these are effectively little setters. Something like that. And then finally, maybe a helper method to get the SVG HTML there. Yeah, what if we did that instead? What would that look like? Okay. Well, we're going to have an object where I'll just use it as a class. We now know the constructor is going to accept the name of the file that should be loaded. So we could then move this up here.

We now know the constructor is going to accept the name of the file that should be loaded. So we could then move this up here. Next, this kind of stuff, this sort of messy document fragment stuff can be part of the constructor. Create a div, set the innerHTML to the SVG, then create a DocumentFragment and append that div to the fragment. Finally, I want an easy way to access that SVG. So we could even say this.svg equals fragment.querySelector.svg. Next we said we need a classes method, and then a width method, and finally a height method.

Next we said we need a classes method, and then a width method, and finally a height method. Now we know we want this to be sort of like a fluent API. So ultimately we want to return this in every case. Okay. So let's come back down and implement this. Here is what we were doing earlier. So now I could just say, well, if you have something, we'll let this method decide what it should do. If you give us a falsy value, it's not going to do anything, and that's okay.

it should do. If you give us a falsy value, it's not going to do anything, and that's okay. But if you do have one, then I could say this.svg and add the given classes. And we might need to tweak that a little bit, but we'll take a look in a moment. So that takes care of this fit. Next, we have the width. So same thing. If you gave us a width, then this.svg.setAttributes. Finally, we're basically doing the same thing for the height. Like so.

Finally, we're basically doing the same thing for the height. Like so. Okay. So now all of this could be removed, and this is what we end up with. So here's our view component, and then here's a specialized object for interacting with an SVG. And then finally, I think we had a getHTML method, and all that's going to do is grab the SVG and give us the outer HTML. Alright. Now, if we scroll down, we instantiate it, we run through our setters, and then we get

Alright. Now, if we scroll down, we instantiate it, we run through our setters, and then we get the SVG string itself, and we apply it here. So if I come back to Chrome, give it a refresh, and let's see if we have any issues. Cannot find module undefined. Let's take a look. Oh, sorry. One more refresh, and there we go. It seems to be working. So now, if we select any of these, it is now an instance of our inline SVG component.

It seems to be working. So now, if we select any of these, it is now an instance of our inline SVG component. So if we switch back, I'll let you take a look at this. Really not that complicated. Set up a document fragment, add a couple helpful setters, and then return the outer HTML. Now you can see the benefit to using a render function here. We could accomplish this with traditional templating, but I personally don't see much benefit to doing so. Alright. That's it.