Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

35. Dealing with SVG icons

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

I've gone ahead and pulled in a bunch of SVG icons into this project, which you can find on the source code over on GitHub.

00:07

These are from Iconic, so definitely check this out if you want to add any more icons or if you generally need them for your projects. So what we're going to do here is we're basically going to build out an SVG component that we can pass in the name of any of these icons

00:22

we have stored in this SVG directory, and we can just have them rendered on the page And then we can additionally pass any styles to them so we can change the colors, the width, height, whatever we need to do. So make sure you have these within the SVG directory of resources

00:37

if you're following along. And we're going to go ahead and build out this SVG component, which we're just going to put inside of each of these. And then we'll go ahead and change up the X that we have currently defined out

00:49

as times, I think, on the fixed form wrapper. Just check what we did here. And we might have done that on the create discussion form. So let's have a look for that.

00:58

Yeah, so we did that just here. So let's focus on our Markdown toolbar first of all. Now, we need a way to load in our SVG icons, and we're going to do this with Vite SVG Loader.

01:10

There are a ton of ways that you can use this down to the very simple just importing them. But I find this quite messy because if we have lots of icons on our pages or within particular components,

01:21

we have to do a huge amount of imports here to pull every single one in. So we're going to go ahead and create a component which allows us to do this very, very easily just by importing a single component. So we're going to start by installing the Vite SVG Loader.

01:38

This needs to be registered as a plugin over on our Vite config file where all of our other plugins are imported and used. So we're going to go ahead and import the SVG Loader from Vite SVG Loader.

01:52

Let's just try that again. And there we go. And then all we need to do is just pass this in to here. That's it. Invoke here.

01:59

And we're pretty much done. You can pass some options through to here. For example, if you didn't want SV Go to be used to change around your icons, this basically just tidies up icons in various ways.

02:12

We can set that to false. I tend to do this first of all, and then go back and change the icons if we need to remove anything. This tends to get rid of the view box of each icons,

02:21

which means we can't style them up nicely. But we'll set that to false now and review that a little bit later. OK, so the next thing we want to do is go ahead and create this SVG component out. We'll do this in the main directory here because we could use this

02:37

anywhere in our app. We're going to create this out as SVG.view. So how is this going to work? Well, let's create out our script section just here.

02:46

What we effectively want to do is accept a prop into this SVG component with the name of the icon that we want to display. So let's go ahead and create out our props in here with define props. And let's go ahead and accept a name into here.

03:02

We'll give a little bit more detail here just because we want this to be required. Like so, because it actually needs this to be able to render properly. So now that we've got this SVG component, let's head over to our Markdown toolbar here

03:18

and let's go ahead and see how we want to use this. So let's create our script in here. Go ahead and import SVG from SVG.view. And it's going to look a little bit like this.

03:29

We're going to say SVG name and we're going to give the name of the icon. So in our case, we have called this if we just go down to where we're storing these icon and bold. So it would just be icon bold.

03:42

And then this component will do everything it needs to render this component out for us. So let's go back over to this component and see how we can do this. So we want to go down here and create out a variable called icon,

03:57

and we want to dynamically or asynchronously pull in a component. So remember, the package that we're using allows us to import now SVGs as components, but we can't really do import and then icon bold from and then a thing we need to manually import this.

04:15

So let's create that variable, which we're going to use inside of our template to actually render the icon. And let's use define async component from view. So let's pull this in to our

04:28

component here to find async component from view. And then to do this, all we do is just call define async component and then into this we tell this what to do. How to pull in this component.

04:41

In our case, we're going to go ahead and manually import a component within here. Let's just get rid of these brackets because we do not need that. And in here, we're just going to give the path name to the icon. Now, this depends on your directory structure.

04:55

So for us, we are in components, so we need to go back, back again, back again into resources, into SVG. And then we need X dot and then SVG. So X is just going to be replaced out with the prop name that we're passing in.

05:15

So basically for icon hyphen bold, this is going to put an icon hyphen bold SVG from this SVG directory. Now, if we were to just dump this out on the page, so let's output the icon that we've just defined in that variable there on the page.

05:31

Let's just see what happens when we try to see this. So this literally just gives us an object. What we actually need to do is create out a component component in view and actually tell this what component is.

05:45

This is just a way to dynamically render our components via a variable name, something that you have inside of you. We just use this is prop and we just pass whatever component it is that we are importing into our template.

06:00

So now if we come over, there we go. We have a bold icon for our bold markdown toolbar, which is great. So we've done all the hard work. We can just duplicate down that SVG component call

06:13

and just have this work as normal now. But we want to go ahead and style each of these up as well. So let's go ahead and just add a couple of styles to this icon just here. So let's just set a height and a width on this for now.

06:26

There we go. And I think that looks great. We can click this now, type something, click bold, and it's done for us. So let's really just copy this down for each of these

06:38

and replace out each of the icon names. No need to go ahead and import these individually now. It's just going to work. What was that one code?

06:46

Let's just add that in. And we'll do the same for link as well. Like so. Great. So let's come over and there we go.

06:54

We have a nice markdown toolbar that we can use to do anything inside of here. Now, as part of this, I also included a close icon as well, which is just an X, but it's an icon, so it's going to look a little bit better so we can do exactly the same thing over on our create discussion form

07:11

with this just here. So we're going to go ahead and use that SVG component. So let's pull that in and we're going to set the name of this to icon close. Again, we can set a height and a width to this.

07:22

So that's a height and a width of five. And we'll just make sure we close that off properly and we go ahead and import this down here. So let's import.

07:35

SVG and see if that will also complete for us. Yeah, there we go. Great. So let's come over and there we go. We have a really nice close icon now that works and looks a little bit better.

Episode summary

In this episode, we're diving into dealing with SVG icons in our project. First up, we bring in a set of SVG icons (from Iconic), and we chat about why having a reusable approach is way better than importing each icon one-by-one everywhere you need it. Tracking down imports for dozens of icons can get pretty messy!

We're going to make life easier by building a single SVG component that can take the name of any icon and magically render it wherever we need. Plus, we'll allow passing in style props (like width, height, color, etc.), so you can tweak the icons however you like.

We set up Vite SVG Loader and register it as a plugin, discussing some config options (like disabling SVGO if you need to keep the icon's viewBox for styling). Then, we create the core SVG.vue component, which receives the icon name as a prop, and uses Vue's defineAsyncComponent to dynamically import the right SVG file based on the name. The key trick is using Vue's <component :is="icon" /> for rendering whatever SVG gets pulled in.

Once this reusable SVG component is in place, we wire it up in our Markdown toolbar — adding icons like bold, code, and link, all without massive import statements. We just specify the icon's name as a prop to the SVG component, and it takes care of the rest! We also whip up some quick styles to set the size of the icons.

Finally, we show how you can plop this SVG component anywhere else in your app — for example, on the "close" button in the create discussion form, making your UI look that much nicer with consistent, simple icon handling. Overall, this episode is all about making SVGs in your project organized, scalable, and nice to work with!

Episode discussion

No comments, yet. Be the first!