SVGs with Vite and Vue
Playing
01. SVGs with Vite and Vue

Episodes

0%
Your progress
  • Total: 9m
  • Played: 0m
  • Remaining: 9m
Join or sign in to track your progress

Transcript

00:00
Almost every project uses SVG icons, so I'm going to go ahead and show you how to very
00:04
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.
00:26
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
00:46
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
01:12
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
01:37
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
01:58
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
02:22
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
02:45
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
03:14
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
03:36
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
04:01
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
04:19
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
04:41
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
05:02
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
05:24
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
05:46
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.
06:07
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
06:31
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
06:55
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
07:16
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
07:39
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
08:00
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
08:25
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
08:47
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.

Episode summary

In this episode, we take a look at the best ways to work with SVG icons in a Vue project that's set up with Vite. SVGs are something pretty much every project uses, so it's super handy to know a maintainable way to work with them.

First, we see the very most basic method: just copy-pasting the SVG markup right into your Vue file. It works, but quickly gets messy and hard to maintain — so that's not ideal for projects with lots of icons.

To improve things, we install the vite-svg-loader package. This lets us import SVG files directly into Vue components like they're regular Vue components. Much more convenient! We go through adding the loader to vite.config.js and using it to import and display an SVG file as a component.

But what if our project has a ton of icons? Importing each one manually gets messy, so the next step is to build a custom SVG component. We make an <Svg /> component that takes just a name prop. Under the hood, it dynamically imports the right SVG file based on the name you give it, so you only have to add one import in your script! We also make sure you can still use classes and styles with your icons.

By the end of the episode, you’ll have a neat and scalable way to work with SVG icons in your Vue + Vite projects. Just add your new icons to the folder, and use <Svg name="icon-name" /> anywhere in your app. Easy!

Episode discussion

No comments, yet. Be the first!