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: https://github.com/ahaywood/brazilian...
Figma File: https://www.figma.com/file/z6Vipsmnua...
📹 Other videos in the series:
Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - • Intro - Master the Full-Stack: Redwoo...
Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - • Setup Your Redwood.js Environment: A ...
Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - • RedwoodJS File and Folder Structure: ...
Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - • Maximize Efficiency: Building Faster ...
Part 5: Mastering the Redwood Router: A Comprehensive Overview - • Mastering the Redwood Router: A Compr...
Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - • Easy Tailwind Setup: Customize Fonts ...
Part 7: Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing - • Getting Started with Storybook: The U...
Part 8: Don't Skip Testing: How to Start Testing React Components - • Don't Skip Testing: How to Start Test...
Part 9: Snapshot Tests: Pros, Cons and Best Use Cases - • Snapshot Tests: Pros, Cons and Best U...
👉 Part 10: THIS VIDEO 👈
🔗 Links
RedwoodJS: https://redwoodjs.com/
RedwoodJS Documentation: https://redwoodjs.com/docs/introduction
CWD MDN Documentation: https://www.geeksforgeeks.org/node-js...
Path inside Node Documentation - https://nodejs.org/api/path.html
path.relative - https://nodejs.org/api/path.html#path...
fs-extra - https://www.npmjs.com/package/fs-extra
glob on npm - https://www.npmjs.com/package/glob
LogRocket article on Understanding glob patterns - https://blog.logrocket.com/understand...
Array.prototype.sort on MDN - https://developer.mozilla.org/en-US/d...
Array.prototype.every on MDN - https://developer.mozilla.org/en-US/d...
Javascript Method Promise.all() - https://developer.mozilla.org/en-US/d...
node-html-parser on npm - https://www.npmjs.com/package/node-ht...
Video on SnapShot Testing - • Snapshot Tests: Pros, Cons and Best U...
Playlist for Working with SVGs - • Comprehensive Guide to Getting Starte...
Watch video Secrets of React: How to Easily Include Icons in Your Project online without registration, duration hours minute second in high quality. This video was added by user Self Teach Me 02 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,178 once and liked it 55 people.