conveniently and easily import SVGs into your projects. We're going to look at a couple of ways to do this, then we're going to build our own SVG component, which makes this even easier. So the first thing that I've done is gone ahead and created out a fresh view project with Vite. So if you're following along, go over to the docs and do that first of all.

And I've also gone ahead and just cleared everything out here. So let's just take a look around. App.view is completely empty. We don't have any styles. And the only other thing that I've done here is gone ahead and created out an SVG folder with this bolt SVG icon in the directory. Now, let's take a look at the first and probably the simplest way to just put an icon on

the page. That is just to output the SVG on the page. It works, but of course, it's not the most maintainable solution. It's going to add a huge amount to your markup, particularly for more complex icons. It works, but it's not great. And of course, you can go ahead and still style this. So we just add some style down here. Let's go ahead and just create an icon with a width of 50

and we'll do a height of 50 here as well. We can just apply the styles directly to the SVG. So it's pretty convenient. It works, but again, not maintainable in the long run. So what we're going to do is pull in a SVG loader package for Vite, install it, look at a way that we can do this and then figure out how we can build our own component just to make our imports and our

templates a little bit cleaner. So we'll go ahead and pull this package in. We just need to do an npm install on this. So let's come over and pull this in. Just while that's finishing, let's get rid of the SVG that we have on the page here. We'll keep this icon styled so we can reuse it. And once that has installed, we're going to head straight over to our Vite config. So over in

vite.config.js, we're going to add this as a plugin just inside of here. So we need to go ahead and import this first of all. So import the SVG loader from Vite SVG loader. And really simply, we're just going to add this to our list of plugins. So let's go ahead and just pull this in here. SVG loader. And we're just going to invoke that. That's pretty much all we need to do if we want

all of the options for this to remain the same. What you can do is go ahead and specifically define out SVGO config, for example. So you can add that in there if you need to. And all of that is available in the doc. So you can check that out if you need to do anything specific. OK, so in order to get that working, that's pretty much it. We have that installed. Now what we can do is look

at the first way that we can pull these icons in. The first way is just to directly import your SVG component or file like it's a component. So, for example, we're going to go ahead and import Bolt and we're going to import that from our assets directory under SVG and Bolt.svg. That's pretty much it. Now we can use this SVG icon now like a component over on our page. So we can go ahead and

define that out as a component. And if we head over to our page here, sure enough, you can see that that works. So the package is doing all the heavy lifting for us and we now have that icon on the page. Again, we can still apply classes here, so we can still give that a class of icon and these styles will be applied to this. Now, through experience, this is absolutely fine. But if you

have a huge amount of icons on your page, you're going to end up with a huge amount of imports in here and things tend to get pretty messy pretty quickly. So as the second option, what we're going to do is build out our own view component, which means that we can just import one component and reuse this component for any of the icons that exist within our project just over here. So let's

go and just create out a component for this. So we'll do this inside of the components directory and I'm just going to call this SVG. But of course, you can call this icon whatever you want this to be. Now, this is going to be like a standard component here. We're going to have a script setup section at the top here and we're going to have a template section at the bottom, which is

going to render that icon out for us. And we're going to do this dynamically and asynchronously so the icon gets imported when we need it. Now, let's take a look before we do anything in here about how we want to use this new SVG component that we've just created. So I'm going to go ahead and import the SVG component and that's going to come from our components directory and svg.view

and we're going to use this on the page like normal. So let's just do this underneath here so we can see this working. We, of course, are still going to be able to apply classes to this directly into that icon. But what we want and the way that we want to use this is just to provide a name and have this hooked up. So I want the name of this to be bolt. That's going to reference the

name of the file that we have stored just over here. So that, of course, at the moment is not working because we're not doing anything within that component. But now we can go ahead and define out the props that we want to use here. So we're going to go ahead and use define props and we know that we want to accept in a name prop in here. The type of this is going to be string

and we're going to say that this is required because, of course, it's pointless having an SVG icon if we're not telling this component which one to put in. So the way that we're going to do this is inside of our template section, we're going to use the component component within view, which allows us to put in a dynamic component by name. So we're going to say is and then we're

going to reference a variable that we've already defined in our script section, which represents that component. So think of this part here as the same as doing what we've done here. But, of course, we don't know what the icon is until we have fetched it and then allowed it to be passed in. So what are we going to pass into here? Well, let's just go ahead and comment this out.

And down here, we're going to define out a icon variable that's going to represent that. Now, to do this, what we want to do is a synchronously pull in this icon with an import and to do that, we use a function within view called define async component. So we'll go ahead and import this just at the top here. So define async component from view. And now what we can do

is in here use define async component and inside of the callback for this, just to find that out, we can just go ahead and import that component like we would do over here, like we've done here. So basically, we're just taking the functionality that we already know works and giving it the ability to happen as we need it. So we're going to go ahead and import. And we need to be careful

here. We need to think about the directory structure. We're already inside the components directory. So we're going to go back into assets, into SVG. And now we need the name of the icon. And then we need to add SVG onto the end of this. The name of the icon needs to go in here. Now we know that because we have our props defined. So let's go ahead and assign a variable

to our props. And then in here, we can just go ahead and reference props.name. So now what's going to happen is this icon is going to represent a component which has the imported SVG and all of that will happen through that SVG package. So let's just go ahead and dump that out on the page really quickly just to see this icon. And I'm actually going to get rid of this. Let's take a

look at what this actually gives us. So this just gives us an object because at the moment, we're not doing anything with this. This is now a component that we can use inside of this component component. So we're just going to pass in icon. And let's go over. And that's not showing at the moment. Let's just make sure we're not actually creating out a callback in there. So this is

directly being returned here from this. OK, let's go over. And there we go. We have our icon, of course, not styled at the moment, but we can do that. So if we head over to here, let's get rid of the bolt icon and let's go ahead and apply a class to this class of icon. And there we go. We get no difference whatsoever. The good thing now is we don't need to import every single icon we

want to use. We just import this SVG component that we've built and then we can just reuse this for all of the icons that we have inside of our project. So of course, we only have one at the moment, but you might have multiple icons that you want to use in different places. You can still pass down the any attributes that are going to be applied to SVG. It will work in exactly the same

way. But now you just have one convenient component that will pull in any icon by name. And of course, if you have a more unique use case, you can go ahead and change this up to pass in different props if you need to wrap this, whatever you need to do. But that is how I typically put in SVG icons in projects to keep the script section nice and clean and have this work really effortlessly.