- 61
- 299 989
Self Teach Me
United States
Приєднався 28 гру 2019
This channel is all about web design and development and helping you level up!
Secrets of React: How to Easily Include Icons in Your Project
We'll cover how to export SVG icons from Figma and use them within your React projects, streamlining your workflow. We'll automate the process with scripts, perfect for reusing across multiple projects.
What You'll Learn:
* The best way to export SVG icons from Figma
* Organizing SVGs in your project
* Creating a dynamic SVG Sprite
* Automating with scripts
* Using your SVG sprite in React (with TypeScript)
* Enhancing accessibility
* Writing Storybook stories
* Unit Tests, ensuring reliability and future-proofing
👉 Chapters
00:00 - Introduction to Exporting Icons from Figma
00:15 - Selecting and Preparing Icons in Figma
00:33 - Exporting Icons as SVGs
00:53 - Organizing SVGs in Your Project
01:19 - Batch Exporting Icons from Figma
02:15 - Setting Up SVG Sprite in VS Code
03:18 - Adding SVGs to the Sprite
04:41 - Setting Up ViewBox for SVGs
05:26 - Making SVGs Accessible with Title Tags
06:06 - Cleaning Up SVG Paths for Consistency
07:02 - Creating a React Icon Component
08:21 - Dynamically Referencing Icons in React
09:18 - Previewing Icons with Storybook
10:22 - Passing Additional Props to the Icon Component
11:03 - Styling SVGs with CSS
12:37 - Automating Icon Generation with Scripts
13:55 - Structuring the Icon Build Script
16:20 - Reading and Organizing SVG Files for Sprites
18:08 - Verbose Logging and Script Configuration
19:07 - Checking for Existing SVGs in the Sprite
20:03 - Generating the SVG Sprite with Node
21:19 - Parsing SVG Files and Cleaning Attributes
23:03 - Generating the Complete SVG Sprite
24:29 - Writing Changes Only if SVGs are Updated
25:10 - Generating TypeScript Definitions for Icons
26:28 - Creating Readme and Updating Manifest
28:02 - Completing the Icon Generation Script
29:22 - Testing the Icon Generation Script
30:43 - Adding Generated Icons to Storybook
31:56 - Correcting Generated TypeScript Definitions
32:43 - Enhancing Icon Component with TypeScript
34:28 - Writing Tests for the Icon Component
36:05 - Creating Snapshot Tests for Each Icon
37:49 - Conclusion and Final Thoughts
⚡ Quick Links
- Code on GitHub: github.com/ahaywood/brazilian-nut-news__stepped-rw
- Figma File: www.figma.com/file/z6Vipsmnua7VzF9E6w4PtL/Brazilian-Nut-News-App?type=design&node-id=0%3A1&mode=design&t=3Yv2lwh8Q04KYmuD-1
📹 Other videos in the series:
- Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - ua-cam.com/video/Xr92RcUMngc/v-deo.html
- Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - ua-cam.com/video/lR8qwNFI5Z8/v-deo.html
- Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - ua-cam.com/video/tJd2Db6y8tw/v-deo.html
- Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - ua-cam.com/video/vnBij3YzOpI/v-deo.html
- Part 5: Mastering the Redwood Router: A Comprehensive Overview - ua-cam.com/video/HkposptbF-o/v-deo.html
- Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - ua-cam.com/video/3UVQ9FdGgcA/v-deo.html
- Part 7: Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing - ua-cam.com/video/PMNAehI0_cI/v-deo.html
- Part 8: Don't Skip Testing: How to Start Testing React Components - ua-cam.com/video/-9cO1OseeB8/v-deo.html
- Part 9: Snapshot Tests: Pros, Cons and Best Use Cases - ua-cam.com/video/CIMrt1kwpaE/v-deo.html
👉 Part 10: THIS VIDEO 👈
🔗 Links
- RedwoodJS: redwoodjs.com/
- RedwoodJS Documentation: redwoodjs.com/docs/introduction
- CWD MDN Documentation: www.geeksforgeeks.org/node-js-process-cwd-method/
- Path inside Node Documentation - nodejs.org/api/path.html
- path.relative - nodejs.org/api/path.html#pathrelativefrom-to
- fs-extra - www.npmjs.com/package/fs-extra
- glob on npm - www.npmjs.com/package/glob
- LogRocket article on Understanding glob patterns - blog.logrocket.com/understanding-using-globs-node-js/
- Array.prototype.sort on MDN - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
- Array.prototype.every on MDN - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
- Javascript Method Promise.all() - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
- node-html-parser on npm - www.npmjs.com/package/node-html-parser
- Video on SnapShot Testing - ua-cam.com/video/CIMrt1kwpaE/v-deo.html
- Playlist for Working with SVGs - ua-cam.com/play/PLrz61zkUHJJHFhsK3BKi-G5FjBOsO-aOY.html
What You'll Learn:
* The best way to export SVG icons from Figma
* Organizing SVGs in your project
* Creating a dynamic SVG Sprite
* Automating with scripts
* Using your SVG sprite in React (with TypeScript)
* Enhancing accessibility
* Writing Storybook stories
* Unit Tests, ensuring reliability and future-proofing
👉 Chapters
00:00 - Introduction to Exporting Icons from Figma
00:15 - Selecting and Preparing Icons in Figma
00:33 - Exporting Icons as SVGs
00:53 - Organizing SVGs in Your Project
01:19 - Batch Exporting Icons from Figma
02:15 - Setting Up SVG Sprite in VS Code
03:18 - Adding SVGs to the Sprite
04:41 - Setting Up ViewBox for SVGs
05:26 - Making SVGs Accessible with Title Tags
06:06 - Cleaning Up SVG Paths for Consistency
07:02 - Creating a React Icon Component
08:21 - Dynamically Referencing Icons in React
09:18 - Previewing Icons with Storybook
10:22 - Passing Additional Props to the Icon Component
11:03 - Styling SVGs with CSS
12:37 - Automating Icon Generation with Scripts
13:55 - Structuring the Icon Build Script
16:20 - Reading and Organizing SVG Files for Sprites
18:08 - Verbose Logging and Script Configuration
19:07 - Checking for Existing SVGs in the Sprite
20:03 - Generating the SVG Sprite with Node
21:19 - Parsing SVG Files and Cleaning Attributes
23:03 - Generating the Complete SVG Sprite
24:29 - Writing Changes Only if SVGs are Updated
25:10 - Generating TypeScript Definitions for Icons
26:28 - Creating Readme and Updating Manifest
28:02 - Completing the Icon Generation Script
29:22 - Testing the Icon Generation Script
30:43 - Adding Generated Icons to Storybook
31:56 - Correcting Generated TypeScript Definitions
32:43 - Enhancing Icon Component with TypeScript
34:28 - Writing Tests for the Icon Component
36:05 - Creating Snapshot Tests for Each Icon
37:49 - Conclusion and Final Thoughts
⚡ Quick Links
- Code on GitHub: github.com/ahaywood/brazilian-nut-news__stepped-rw
- Figma File: www.figma.com/file/z6Vipsmnua7VzF9E6w4PtL/Brazilian-Nut-News-App?type=design&node-id=0%3A1&mode=design&t=3Yv2lwh8Q04KYmuD-1
📹 Other videos in the series:
- Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - ua-cam.com/video/Xr92RcUMngc/v-deo.html
- Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - ua-cam.com/video/lR8qwNFI5Z8/v-deo.html
- Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - ua-cam.com/video/tJd2Db6y8tw/v-deo.html
- Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - ua-cam.com/video/vnBij3YzOpI/v-deo.html
- Part 5: Mastering the Redwood Router: A Comprehensive Overview - ua-cam.com/video/HkposptbF-o/v-deo.html
- Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - ua-cam.com/video/3UVQ9FdGgcA/v-deo.html
- Part 7: Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing - ua-cam.com/video/PMNAehI0_cI/v-deo.html
- Part 8: Don't Skip Testing: How to Start Testing React Components - ua-cam.com/video/-9cO1OseeB8/v-deo.html
- Part 9: Snapshot Tests: Pros, Cons and Best Use Cases - ua-cam.com/video/CIMrt1kwpaE/v-deo.html
👉 Part 10: THIS VIDEO 👈
🔗 Links
- RedwoodJS: redwoodjs.com/
- RedwoodJS Documentation: redwoodjs.com/docs/introduction
- CWD MDN Documentation: www.geeksforgeeks.org/node-js-process-cwd-method/
- Path inside Node Documentation - nodejs.org/api/path.html
- path.relative - nodejs.org/api/path.html#pathrelativefrom-to
- fs-extra - www.npmjs.com/package/fs-extra
- glob on npm - www.npmjs.com/package/glob
- LogRocket article on Understanding glob patterns - blog.logrocket.com/understanding-using-globs-node-js/
- Array.prototype.sort on MDN - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
- Array.prototype.every on MDN - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every
- Javascript Method Promise.all() - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
- node-html-parser on npm - www.npmjs.com/package/node-html-parser
- Video on SnapShot Testing - ua-cam.com/video/CIMrt1kwpaE/v-deo.html
- Playlist for Working with SVGs - ua-cam.com/play/PLrz61zkUHJJHFhsK3BKi-G5FjBOsO-aOY.html
Переглядів: 1 214
Відео
Snapshot Tests: Pros, Cons and Best Use Cases
Переглядів 42411 місяців тому
In this video, we'll build a responsive header component using Redwood JS and Tailwind CSS and test it using Snapshot tests What You'll Learn: * Creating and a header component in React * Converting text to SVG for efficiency * Writing semantic HTML and JSX in VS Code * Styling components with Tailwind CSS, including dark mode * Running and writing tests for your component in Redwood 👉 Chapters...
Don't Skip Testing: How to Start Testing React Components
Переглядів 1,1 тис.11 місяців тому
Discover the importance of testing in software development and how it can give you confidence that your application won't break. We'll talk about how to approach testing and write a few tests within React and RedwoodJS 👉 Chapters 0:00 Introduction 1:06 Building and Styling a Navigation Bar in Redwood JS 3:48 Running Storybook for Component Preview 4:08 Styling the Navigation Bar with Tailwind 8...
Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing
Переглядів 1,6 тис.11 місяців тому
In this UA-cam video, we’ll take a look at Storybook and explore its features and benefits. With RedwoodJS this is as a simple as running a single command! We’ll go over the basics of creating stories, showcasing the different panels and controls within Storybook, and highlighting the component variations and automated documentation. Whether you're new to Storybook or looking to enhance your de...
Easy Tailwind Setup: Customize Fonts and Colors with Redwood JS
Переглядів 1,3 тис.11 місяців тому
In this video, we'll set up Tailwind CSS, customize our font and color palette, and configure our project for styling. With RedwoodJS, this is one of the easiest Tailwind setups you'll ever do. 👉 Chapters 0:00 Introduction 0:46 Setting Up Tailwind CSS with a Single Command 1:14 Exploring the Initial Setup 1:34 Configuring Fonts for Your Project 2:16 Selecting Google Fonts 3:47 Tailwind Configur...
Mastering the Redwood Router: A Comprehensive Overview
Переглядів 63911 місяців тому
In this video, we dive into the Redwood router and explore its unique features and capabilities. We discuss how it differs from other frameworks and demonstrate how to leverage its power to connect pages, layouts, and components. 👉 Chapters 00:00 - Introduction 01:22 - Exploring the Router File in VS Code 01:46 - Modifying the Feed Page Route 02:11 - Understanding Route Components 02:32 - Linki...
Maximize Efficiency: Building Faster with Redwood's Generators
Переглядів 84011 місяців тому
Here, we look at maximizing your efficiency as a developer through the use of RedwoodJS's generators. Out of the box, Redwood comes with 16 different generators that speed up and automate the process of creating components, layouts, and pages. 🎁 FREE CHEATSHEET: selfteachme.ck.page/4edae5d0d7 👉 Chapters: [00:00:00] Introduction [00:00:38] Setting Up a Redwood Project [00:01:14] Disclaimer and B...
RedwoodJS File and Folder Structure: Everything You Need to Know
Переглядів 1 тис.11 місяців тому
In this video, we'll explore the file and folder structure within RedwoodJS, a full-stack React framework. We dive into Redwood's unique features, contrasting it with other frameworks like Next and Remix. Explore the API folder, backend configuration with Prisma, and serverless functions setup. On the backend, we'll briefly look at the functions, GraphQL, and lib directories, and delve into the...
Setup Your Redwood.js Environment: A Beginner's Tutorial
Переглядів 1,7 тис.Рік тому
In this video, let's talk about tools and prerequisites for our RedwoodJS full-stack application. Together, we'll walk through every step from installation to the first run. Plus, I've got some pro tips on tools and extensions that will make your coding experience silky smooth. 👉 Chapters 0:00 - Introduction 0:26 - Starting with Redwood.js Documentation 0:32 - Requirements for Redwood.js Projec...
Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide
Переглядів 2,6 тис.Рік тому
This is introducing a multi-part UA-cam series where we’ll build a Hacker News clone called the Brazilian Nut News. This project will be built on RedwoodJS, a full-stack React framework. We’ll cover React, GraphQL, Apollo, Storybook, Prisma, TypeScript, and Jest. 👉 Chapters 0:00 - Introduction 0:28 - Introduction to Redwood: A Full-Stack Framework 0:59 - Features and functionality of the App 1:...
Upgrade your project to Next.js 14 and Supercharge it with TypeScript
Переглядів 1,5 тис.Рік тому
Upgrade your project to Next.js 14 and Supercharge it with TypeScript
Adding a Feature: When the Audio Player Reaches the End...
Переглядів 1,6 тис.3 роки тому
Adding a Feature: When the Audio Player Reaches the End...
Creating Time Jumps for our Custom Audio Player in React
Переглядів 1,9 тис.3 роки тому
Creating Time Jumps for our Custom Audio Player in React
Adding Bookmarks or Chapters to our Custom Audio Player in React
Переглядів 2,7 тис.3 роки тому
Adding Bookmarks or Chapters to our Custom Audio Player in React
How to Build a Custom Audio Player in React
Переглядів 58 тис.3 роки тому
How to Build a Custom Audio Player in React
Creating a 5 Star Rating Component in CSS and HTML. No JavaScript.
Переглядів 3,6 тис.3 роки тому
Creating a 5 Star Rating Component in CSS and HTML. No JavaScript.
Input Animation with HTML, CSS, and JavaScript
Переглядів 1,2 тис.4 роки тому
Input Animation with HTML, CSS, and JavaScript
Building a Sliding CSS Menu without JavaScript
Переглядів 4,8 тис.4 роки тому
Building a Sliding CSS Menu without JavaScript
Thanks for great work! What is the font name you use in VS code?
Can we lower the backing audio track and make your voice louder? Kinda hard to hear
When detecting if icons have changed, i had to use `id=\"${name}\"` instead of `id=${name}`. Also, i needed to manually add "baseUrl": "./", to the ts config file for the web package
cool video, thanks! why 1440x595 tho?
my hero image is set to full screen, so not sure how to deal with the height :/
Hi, I watched the intro and I was able to do it on my own. I put if(audioRef.current.ended && isPlaying) I reset the progress bar component and called the routine to set the audioRef and format the current time in the whilePlaying() just before requestAnimationFrame(whilePlaying) and it works.
I had that same error but I tried to fix it myself and after about three or four hours I did. I realized that I was trying to add an integer to a string so this is what I did: let progressBarValue = parseInt(progressBarComponent.current.value); progressBarValue += 30; progressBarComponent.current.value = 0; progressBarComponent.current.value = progressBarValue; calculateCurrentTrackTime(); It works but I like yours better and reduces this to two lines instead of five. Good exercise for me. Good video, works like a charm. The only thing I'm having trouble with is using dynamic sources so I can play one song after the other from a list, but I'll figure it out.
I agree with you, there is not sense in our career if we never have that feeling
Thank you!! Liked, subscribed!
and with <link rel="preload"> ? it works?
Hi, I have a client requirement to implement code coverage in Playwright for my e2e tcs. Can I please get some help on that front?
@SelfTeachMe how to manage code coverage if source code and tests are in different repo
I thought for sure this would end with utilizing the storybook icon gallery.
Thanks a lot Amy 🤩
3:30 damn UA-cam has hardwired my brain to immediately grab my mouse and skip 1-3 minutes in a video whenever the creator says "but first, lets talk about..." xd I was so ready to skip the sponsor block
Ultimate React icon component without lazy loading and returning a div when an unknown name is passed.
what do i do if i want the svg to animate dynamically?
These are really great, thanks for the effort that went in! Hope to see more!
I really appreciate this video
Please continue this serie ❤️😎 I love you videos.
It helped a lot. Thank you!
hey Amy! I love working with svg sprite. Since watching your tutorial I've never used any other method for using icons in big projects. But one little bit issue with svg sprite is that it does not preload with the initial html. So, if the list of icons is huge in a slow connection there is a delay before the icons are shown. I've tried link:preload with all possible combinations of attribute, but svg is not preloaded anyways. Though it is a very minor issue, can you suggest any other solution for preloading the icons?
yep - I'm in love. Subscribed.
Love this video. Is it possible to add multiple players to different audio files on one main page?
Please Reduce the bg music, tutorial is good
Excellent explanation, thanks!
Wonderful done. Thanks a million!
Nice video. Is it possible to reverse this wave? like i want the image to be at the bottom (in the white part) and I want the part where the image is currently, to be white. Any help appreciated.
You just make it all seem too easy...thank you
Dear madam. I Expteted that multiple tabs create dynamically in react js in One Application
I learned of group in another tutorial but didn't know about naming. Thanks
Your explanation is very clear + your storytelling is good, you are my fav tutor now!
I'm going through your tutorial, and I have to thank you for you putting this together. I have some programming experience coming from firmware and embedded dev space, but I don't have experience in web dev beyond college. So again, thank you for putting this series together.
Perfection 🔥🔥
Can I do something like this in Angular?
Can you also list your extensions? I noticed the loader when you were running a test and consequently, a check icon when it was done and successful
You are a life saver!
Amy!!!
'promosm' 😑
Hey Amy, do you think you might finish off the *Rotten Reviews RedwoodJS tutorial via your channel here maybe? *I could have the name of the project wrong, it's been a hot minute. Love all the recent stuff you've put out. Thank you for all your hard work 🙌🤩💫💻🦸♀
I would love to, but ... I left ZEAL and made all the content while I was on the clock with them, which makes rights tricky. 😞
Wow I learned so much from this one video. I worked along but in a Next JS project. I love how you explained every step so I learned about SVG's and Node JS at the same time. I didn't want to get into yet another framework but your teaching is so good, I'll have to start at the beginning and learn about Redwood JS too :-) Thanks!
YEAHH! Love hearing that! ... Redwood has some really awesome features on the roadmap, including React Server Components 🤩
Very clean! Thanks!
Awesome, that is what I'm searching for 🤩
Glad you found it heplful!
This video saved my life. Thank you so much.
Glad it helped! ... did you see the video I just released on using SVG Sprites with React? The video is long, but we write a script to generate the SVG Sprite for you. 🤩
Awesome Amy, automation 🤩
Thank you! 😁 ... I always love I can take a file from project to project. Next step: I think @bradgarropy has his own npm package he installs everywhere.
Hey! It's great video especially for me, 'cause I am currently working on my FYP, and I need this type of toggle button very very much. Excellent and just wonderful.
Awesome!! So glad you found it helpful!
woow, I loved the way you explain everything! I´m a new dev from brasil, a huge thanks!
Yeahh! So glad you found it helpful!
Спасибо тебе, солнышко, большое!!!
You're welcome!
Putting the label around the whole menu item and not just the hamburger menu /MENU text confuses me. Won’t that trigger the checkbox if you click on one of the menu links eg About?
That's a good question ... I *think* it has to do with how click events bubble. ... TBH, this video was recorded ~3 years ago ... I think there are probably more efficient ways to do this now using the :has selector. Are you familiar?
@@SelfTeachMe it's one oh my FAVOURITE. I got so excited the day Firefox got on board!!! Now I'm waiting for then to get on board with lineargradient(in oklab, oklch(33% 0.3 350.... ). Just won't show the grade if it has the "in oklab" keywords
This was a fantastic tutorial, especially for someone like me who is learning these types of web dev concepts while coming from the field of math and statistics and data. I use the R Shiny framework to create data dashboards, and I've been learning CSS, JS, and HTML to try and spruce my dashboards up. Learning about sprite maps from you was great and I really appreciate the video and all of the tools you showed how to use.
This is so great to hear ... (shameless plug) you may enjoy the video that I **JUST** released: ua-cam.com/video/1-Gjec48nJs/v-deo.html It shows how to dynamically generate an SVG sprite within a React project.
the sound is so far away
Sorry about that ... I've updated my setup since this video was recorded so hopefully you're not having the same problem in newer videos.
your thumbnail it just looks viciously terrifying.
😂 ... this is actually one of my favorite thumbnails.