That is its own component. And you don't really need to look at this at all. But as a very quick example, you'll see for each of the achievements, we will spit out an image tag. And here we grab the user's achievements and we order them according to a level. Okay, so we've decided we can't use an image tag anymore. We actually want the full SVG for each achievement icon. Alright, well, this actually isn't as simple as you would think. Now if we were working with php, no problem at all. We could just dynamically include a blade file.

Now if we were working with php, no problem at all. We could just dynamically include a Blade file. And this is a good technique to use in those cases. So take a look at this right here. So you'll notice this is the achievement icon for what we call the first thousand. Once you get your first thousand points at Lyricast, you get an achievement icon. And this is the ugly SVG for it. But you'll notice it's been renamed from firstthousand.svg to firstthousand.blade.php. And the benefit to this is you can dynamically include it, and you can also pass any variables to it in the process.

And the benefit to this is you can dynamically include it, and you can also pass any variables to it in the process. Here's just a really quick example of allowing for a width or setting a default. And then the same thing here. If you give us a class, we will insert it here, otherwise we won't use anything. So that can be a useful technique, again, if you're using php. But in our case, we're within JavaScript. We're within a view component. So I can't do that. Take a moment and think.

it gets wrapped within a view component that we can then reference. So yeah, this was my first instinct was, well, is it the case that all of these SVGs need to be converted into view components? And then we can import and render them dynamically. Yeah, that was my first thought too. And this would allow for that. But the problem is, in my case, it feels really messy. If I have 30 or 40 different achievement icons, it sure seems like I would have to manually import those and then register them. It feels gross to me.

import those and then register them. It feels gross to me. So I decided, no, I'm not going to do that. Because what I really wanted was some way to say, give me a Webpack plugin that will convert an image tag like this that references an SVG, maybe using some kind of attribute or hook like SVG inline. And if that's detected, replace it with the actual HTML for the SVG. And then I can modify things. So the next step was this one here, vue-svg-inline-loader. And this seems like it would do exactly what you expect.

Okay. So we no longer want this image tag. We know that for sure. Instead, at least for the first pass here, we may talk about this more in the next episode as we bottle it up into something nice. But to get it working, we're going to set the HTML equal to, yeah, the icon HTML itself. So if we took that approach, maybe we'd call a method and we'd pass through the achievement and ideally that should be all we need. Okay. Well, let's see.

Okay. Well, let's see. It sounds like we need a new method here called icon that will accept the achievement. And let's see if we can simply require it. Now my images directory is two levels up and it's within a badges folder. So we'll grab that and then I can get the file name with achievement.icon. All right. So let's see if we can get away with this. So once again, you'll see we filter through all of them. We no longer show an image.

So once again, you'll see we filter through all of them. We no longer show an image. Instead, I have a div where the HTML is set to whatever is returned from this icon method. And all we're doing there is requiring the SVG itself. All right. That should compile behind the scenes. So if I now switch back to Chrome, and now this is what we get. So I expected the full icon here, but instead I get a path to the icon. Not exactly what we want. So what is the issue here?

Not exactly what we want. So what is the issue here? Well, it relates to Webpack and how we load files and how we transform them. Now clearly we can't do a full review of Webpack, but we do cover it at Lyricast. Just look for the series Webpack for Everyone if you're interested, and I cover all of this and more. I think you'll like it. But anyways, let's figure out what we're going to do here. So the way Webpack works is we can tell it, well, run a test for this kind of file. And it can be a regular expression or something as simple as find any file that ends in .svg.

So the way Webpack works is we can tell it, well, run a test for this kind of file. And it can be a regular expression or something as simple as find any file that ends in .svg or any file that ends in .view. And based upon those tests, we can then transform those files in any number of ways. That's what allows us to have a view component with template tags and scripts and styles and still have it work once you run it in the browser. So again, that's all being done with these rules that say, well, look for this file type and then transform it. So at the moment we're using Laravel Mix, and Laravel Mix treats SVGs as basic images. So if it finds an image in my resources directory, it's going to move it to the public directory.

So at the moment we're using Laravel Mix, and Laravel Mix treats SVGs as basic images. So if it finds an image in my resources directory, it's going to move it to the public directory. And in fact, if I switch over to GitHub, you'll see there it is. It found those images and it moved them, or copied them more appropriately. It copied them to the public directory and then it updates the file path. So that's why in Chrome, you'll see the path you're seeing here is an absolute path to where that SVG was copied. And that's why you're seeing this here. But yeah, it's a little tricky with SVGs because sometimes you want to treat it in that way, and then in other cases you don't.

But yeah, it's a little tricky with SVGs because sometimes you want to treat it in that way, and then in other cases you don't. And this is a perfect example of that. So I'll show you how to kind of monkey patch this in. Here's the mix file for Laracasts. I basically want to override the generated config to change how it treats SVG files. So here's what we're going to do. We can use mix.override, and let's console.log the config so you can see what we're working with real quick. So if I run that, yeah, you'll see this is the generated webpack.config.js file.

with real quick. So if I run that, yeah, you'll see this is the generated webpack.config.js file. So what I want to do is dive into the rules here, config.module.rules, run it again, and you'll see here are all of the webpack rules. Again, if you're familiar with webpack, this will be very familiar. If you're not, that's okay. Come along for the ride. Now what you'll see is right up here, here is a rule that finds any image, at least what it thinks is an image. So a png file, a JPEG, a GIF, a WebP, an SVG.

One, I can completely rewrite the test to exclude the SVG, but if Mix is ever updated and we change this, you're kind of stuck with whatever you wrote there. So another option would be this. Let's say config.module.rules, and let's try to find the rule where the rule.test, so we're reading this property here, and we're going to test that against a string like that. So don't be confused by .test.test. The first test is the property name. The second test is a JavaScript method to test it against a string to see, does this regular expression pass for the given string? So that should give us only the Webpack rule that matches an SVG file.

regular expression pass for the given string? So that should give us only the Webpack rule that matches an SVG file. Okay. So once we have that, we now have access to this object here. So yeah, like I said, we could either instantly update the test to something different, or with Webpack we can use exclude. So this would be, again, kind of a way to monkey patch it in for our local version. So let's say exclude SVG files. Yeah, that would be one way we could do this. Kind of a hack, but it works.

And this is why you'll often see things like this. You may need an appropriate loader to handle this file type. All right, let's tell it what to do. I'll say right here, yeah, notice we, within here, we are working with Webpack directly. So this is the nice and clean mix API. But sometimes you need to drop down a level and work with Webpack directly. And that's what we're doing here. So I'll say module.rules, and we're going to push a brand new one. And the test is, look for any file that ends in .svg. So is that starting to make sense?

And the test is, look for any file that ends in .svg. So is that starting to make sense? We're now telling Webpack, all right, if you ever require an SVG file, here's how I want you to transform it. And specifically, I want you to use this list of loaders. So in this scenario, what you want is the HTML loader. The HTML loader allows you to grab the HTML for a file. So let's add our new one here. The loader is called HTML loader. Now in your projects, if you didn't have that, of course you would want to do npm install.

The loader is called HTML Loader. Now in your projects, if you didn't have that, of course you would want to do npm install HTML loader. But because it's already available with Laravel Mix, it's ready to go. So now we've told Webpack what to do when it finds an SVG file. So let's compile it again and check if we've removed that error. And there we go. Check it out. So now if I hover over it, you'll see it's not the img tag anymore. It's the full SVG, which means I can do things like this.

So now if I hover over it, you'll see it's not the image tag anymore. It's the full SVG, which means I can do things like this. Color is red or green or yellow. Now I have the full control that I need. And by the way, if you're curious why setting the color is changing it, it's only because, all right, here's that circle there. That's the background color. And we've set the class of fill-current. That basically means set the fill for this tag equal to the current color. So that's why setting the color on the SVG tag is changing that circle there, that gray