Self Teach Me
Self Teach Me
  • 61
  • 299 989
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
Переглядів: 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
Custom Hooks in React
Переглядів 2,5 тис.3 роки тому
Custom Hooks in React
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
Debugging Inside VS Code
Переглядів 4,2 тис.3 роки тому
Debugging Inside VS Code
How to Build a Custom Audio Player in React
Переглядів 58 тис.3 роки тому
How to Build a Custom Audio Player in React
Building a Circle Graph with SVGs
Переглядів 1,6 тис.3 роки тому
Building a Circle Graph with SVGs
Animating a Custom Hamburger Menu
Переглядів 5 тис.3 роки тому
Animating a Custom Hamburger Menu
How to create and use an SVG Sprite
Переглядів 19 тис.3 роки тому
How to create and use an SVG Sprite
How to Use SVGs with Base64
Переглядів 3,8 тис.3 роки тому
How to Use SVGs with Base64
SVGs in CSS
Переглядів 10 тис.3 роки тому
SVGs in CSS
Getting Started with SVGs
Переглядів 2,2 тис.3 роки тому
Getting Started with SVGs
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.
CSS Toggle Switch
Переглядів 1 тис.3 роки тому
CSS Toggle Switch
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
Code Coverage
Переглядів 36 тис.4 роки тому
Code Coverage
Testing React Components
Переглядів 18 тис.4 роки тому
Testing React Components
Javascript Unit Testing
Переглядів 1,7 тис.4 роки тому
Javascript Unit Testing

КОМЕНТАРІ

  • @mohammed_jarrad
    @mohammed_jarrad 28 днів тому

    Thanks for great work! What is the font name you use in VS code?

  • @deepkulkarni8049
    @deepkulkarni8049 29 днів тому

    Can we lower the backing audio track and make your voice louder? Kinda hard to hear

  • @Cortez3333
    @Cortez3333 Місяць тому

    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

  • @nickwoodward819
    @nickwoodward819 Місяць тому

    cool video, thanks! why 1440x595 tho?

    • @nickwoodward819
      @nickwoodward819 Місяць тому

      my hero image is set to full screen, so not sure how to deal with the height :/

  • @vernevens1598
    @vernevens1598 3 місяці тому

    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.

  • @vernevens1598
    @vernevens1598 3 місяці тому

    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.

  • @irvin374
    @irvin374 4 місяці тому

    I agree with you, there is not sense in our career if we never have that feeling

  • @eduardointech
    @eduardointech 4 місяці тому

    Thank you!! Liked, subscribed!

  • @stefanofattori89
    @stefanofattori89 5 місяців тому

    and with <link rel="preload"> ? it works?

  • @arkapravabhattacharya3118
    @arkapravabhattacharya3118 6 місяців тому

    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?

  • @MujahidMohd-cn7rb
    @MujahidMohd-cn7rb 6 місяців тому

    @SelfTeachMe how to manage code coverage if source code and tests are in different repo

  • @cylewaitforit
    @cylewaitforit 6 місяців тому

    I thought for sure this would end with utilizing the storybook icon gallery.

  • @YunusMyratgeldiyev
    @YunusMyratgeldiyev 6 місяців тому

    Thanks a lot Amy 🤩

  • @lemmiix
    @lemmiix 6 місяців тому

    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

  • @st.deykun
    @st.deykun 6 місяців тому

    Ultimate React icon component without lazy loading and returning a div when an unknown name is passed.

  • @ShinyBudew
    @ShinyBudew 6 місяців тому

    what do i do if i want the svg to animate dynamically?

  • @maxparelius
    @maxparelius 7 місяців тому

    These are really great, thanks for the effort that went in! Hope to see more!

  • @mobyashouri112
    @mobyashouri112 7 місяців тому

    I really appreciate this video

  • @cesarmillan2361
    @cesarmillan2361 7 місяців тому

    Please continue this serie ❤️😎 I love you videos.

  • @kadir_fuzaylov
    @kadir_fuzaylov 7 місяців тому

    It helped a lot. Thank you!

  • @oviirup
    @oviirup 7 місяців тому

    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?

  • @JurassicGecko
    @JurassicGecko 7 місяців тому

    yep - I'm in love. Subscribed.

  • @benarlanda373
    @benarlanda373 8 місяців тому

    Love this video. Is it possible to add multiple players to different audio files on one main page?

  • @nikkisolanki4273
    @nikkisolanki4273 8 місяців тому

    Please Reduce the bg music, tutorial is good

  • @cassieselin983
    @cassieselin983 8 місяців тому

    Excellent explanation, thanks!

  • @friedrichsiever5964
    @friedrichsiever5964 8 місяців тому

    Wonderful done. Thanks a million!

  • @amrutaparab4939
    @amrutaparab4939 8 місяців тому

    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.

  • @thewebspatialist
    @thewebspatialist 8 місяців тому

    You just make it all seem too easy...thank you

  • @vairamuthuvairam9552
    @vairamuthuvairam9552 8 місяців тому

    Dear madam. I Expteted that multiple tabs create dynamically in react js in One Application

  • @ThaRealIansanity
    @ThaRealIansanity 8 місяців тому

    I learned of group in another tutorial but didn't know about naming. Thanks

  • @dagermohamed
    @dagermohamed 8 місяців тому

    Your explanation is very clear + your storytelling is good, you are my fav tutor now!

  • @Emrys_Gough
    @Emrys_Gough 8 місяців тому

    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.

  • @mehrdadkhorasani6009
    @mehrdadkhorasani6009 9 місяців тому

    Perfection 🔥🔥

  • @godstrumpgeorge
    @godstrumpgeorge 9 місяців тому

    Can I do something like this in Angular?

    • @godstrumpgeorge
      @godstrumpgeorge 9 місяців тому

      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

  • @GLawSomnia
    @GLawSomnia 9 місяців тому

    You are a life saver!

  • @kenjonespizza
    @kenjonespizza 9 місяців тому

    Amy!!!

  • @bradleymarshall9334
    @bradleymarshall9334 9 місяців тому

    'promosm' 😑

  • @gracemorganmaxwell
    @gracemorganmaxwell 9 місяців тому

    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 🙌🤩💫💻🦸‍♀

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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. 😞

  • @ThaRealIansanity
    @ThaRealIansanity 9 місяців тому

    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!

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      YEAHH! Love hearing that! ... Redwood has some really awesome features on the roadmap, including React Server Components 🤩

  • @vinassefranche
    @vinassefranche 9 місяців тому

    Very clean! Thanks!

  • @mustafa.wael-dev
    @mustafa.wael-dev 9 місяців тому

    Awesome, that is what I'm searching for 🤩

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      Glad you found it heplful!

  • @mehrdadkhorasani6009
    @mehrdadkhorasani6009 9 місяців тому

    This video saved my life. Thank you so much.

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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. 🤩

  • @QueenRaae
    @QueenRaae 9 місяців тому

    Awesome Amy, automation 🤩

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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.

  • @muhammadzubairshafique1037
    @muhammadzubairshafique1037 9 місяців тому

    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.

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      Awesome!! So glad you found it helpful!

  • @raiffemouraa
    @raiffemouraa 10 місяців тому

    woow, I loved the way you explain everything! I´m a new dev from brasil, a huge thanks!

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      Yeahh! So glad you found it helpful!

  • @evstafyevandrew2198
    @evstafyevandrew2198 10 місяців тому

    Спасибо тебе, солнышко, большое!!!

  • @clevermissfox
    @clevermissfox 10 місяців тому

    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?

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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?

    • @clevermissfox
      @clevermissfox 9 місяців тому

      @@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

  • @andrewdisher2086
    @andrewdisher2086 10 місяців тому

    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.

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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.

  • @mohamedibrahemsaad573
    @mohamedibrahemsaad573 10 місяців тому

    the sound is so far away

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      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.

  • @arctic_shark
    @arctic_shark 10 місяців тому

    your thumbnail it just looks viciously terrifying.

    • @SelfTeachMe
      @SelfTeachMe 9 місяців тому

      😂 ... this is actually one of my favorite thumbnails.