Forem: Sean Yasnogorodski

Handling Icons in React: Best Practices

Sean Yasnogorodski — Thu, 03 Oct 2024 17:44:35 +0000

Throughout my experience developing websites with React, I frequently encountered challenges with icons (especially those not sourced from libraries). One key question was: How can I handle my icons more efficiently in code?

Why I Switched to SVGs

Initially, I used PNG and JPEG files for icons, but quickly realized their limitations. Switching to SVG files offered several advantages:

Scalability: SVGs can scale without losing quality.
Faster Loading: SVG files are lightweight, improving load times.
CSS Styling: SVGs can be easily styled directly in CSS.

Creating Icon Components

After adopting SVGs, I structured my icon components like this:

export const ExampleIcon: React.FC = () => {
  return (
    <svg>
      { /* svg code here */ }
    </svg>
  );
};

While this worked, I wanted more flexibility in styling and leveraging React’s component power. To achieve that, I added props to my icon components:

export const ExampleIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
  return (
    <svg {...props}>
      { /* svg code here */ }
    </svg>
  );
};

This allows us to pass all standard svg element props to our icons.

Organizing Icons in React

To keep my icons organized, I created an icons folder and added a new component whenever I needed a new icon. This method worked for a while, but I wondered—is there a more efficient approach?

Discovering @svgr/cli

After researching best practices, I came across @svgr/cli, a game-changing tool for handling SVGs in React. This CLI tool automatically generates React components from SVG files, saving time and improving maintainability.

Generating Icon Components Automatically

Instead of manually creating icon components, I could now run a single command to generate them:

npx @svgr/cli icons/svgs --out-dir icons/components --typescript

This command converts all SVG files in the svgs folder into TypeScript React components, placing them in the icons/components folder.

Building a Flexible `Icon` Component

To streamline the use of icons, I built a reusable Icon component. Here’s the folder structure I used:

src/
  components/
    icons/
  svgs/
  types/

components/icons/: Contains generated icon components.
svgs/: Stores raw SVG files.
types/: Holds TypeScript types, including icon-type.ts.

Step 1: Define Icon Type

In src/types/icon-type.ts, I defined the type for our icon components:

import type * as Icons from '../components/icons';

export type IconType = keyof typeof Icons;

This type ensures that IconType corresponds to the names of the generated components, such as Logo for a Logo.tsx component.

Step 2: Create the `Icon` Component

Next, I created the Icon.tsx file in src/components/:

import React, { type SVGProps } from 'react';
import type { IconType } from '../types/icon-type';
import * as Icons from './icons';

export type IconProps = SVGProps<SVGSVGElement> & {
  icon: IconType;
};

export const Icon: React.FC<IconProps> = ({ icon, ...props }) => {
  const Component = React.createElement(Icons[icon], props);

  return (
    <span className="custom-icon">
      {Component}
    </span>
  );
};

This component dynamically renders the appropriate icon based on the icon prop. For instance, to display the Logo icon, you would use:

export const TestComponent: React.FC = () => {
  return (
    <div>
      <Icon icon="Logo" />
    </div>
  );
};

Step 3: Styling the Icons

To ensure icons inherit the current text color, add the following to your global CSS file:

.custom-icon path, .custom-icon rect {
  stroke: currentColor;
}

Automating Icon Generation

To simplify the process, I added the following script to my package.json file:

"icons:generate": "npx @svgr/cli src/svgs --out-dir src/components/icons --typescript"

The Final Flow

Whenever you need to add a new icon to your project, simply:

Place the SVG file in the svgs folder.
Run npm run icons:generate.
Use the new icon by referencing it in the <Icon/> component with autocomplete support for icon names.

I hope this article helps you handle icons more effectively in your React projects. Feel free to ask any questions — I'd love to help! 😊

Starting a new blogging journey with Docusaurus

Sean Yasnogorodski — Tue, 29 Nov 2022 17:38:43 +0000

For a really looooong time I wanted to start blogging. I had something in my heart that just kept pounding and I just didn't do anything with it.

About more than a year ago I watched a video of Ali Abdaal - How Writing Online Made me a Millionaire and he recommended a book that's called Show Your Work! by Austin Kleon and I immediately ordered it. Once I read it, all I wanted to do is to start blogging and sharing my knowledge and creating a small community. But as I said earlier, I just didn't do anything with it.

And now it's the time! Actually, 3 weeks ago I started blogging and I uploaded my first blog (I also post these blogs on medium) and I just fell in love with writing blogs. So now every Tuesday I'm going to upload a new blog.

I got a new plan and my plan is to create a new website under my own custom domain and upload all my blogs and my portfolio to that website. And to build that website I chose Docusaurus.

🦖 What is actually Docusaurus?

Basically it's a template website project created by Facebook in React that supports markdown files to upload documents, blogs and more. It also supports localization so you can translate your website to multiple languages, has document versioning and content search throughout the website. Also it supports dark mode out the box!

If you look sometimes in some NPM packages docs website, it might came to your head that a lot of these website looks very similar, and one of the reason is that they might be using Docusaurus!

✍🏻 Why I chose Docusaurus to write blogs?

I've been a Full-Stack developer for the last couple years and one thing that I learnt as a Full-Stack developer is that to become a Senior you need to become a lazy developer. Let me explain.

Lazy developer is developer that uses the right tools to create something great in a short time without the need to write it by yourself from scratch. At the end you're being paid by your project quality and by time delivery, and if you can't deliver both, then you need to get better.

So since I'm a lazy developer, I tried to find a tool that would help me to create a blogging website but still I would have the ability to customize and code the website. And Docusaurus answers it all!

It has super responsive UI with mobile support
It supports localization
I can add blogs and portfolio and other pages
I can create my own custom pages and components
I can code it with React and TypeScript
It supports dark mode

🏁 Let's get started!

So how do you exactly start a new Docusaurus project? The answer is - with one line of code:

npx create-docusaurus@latest my-website classic --typescript

Since I'm using TypeScript (and you should too) I added the --typescript flag but if from some reason you prefer to write in JavaScript, then you can omit --typescript.

After that you can start your new website by running:

npm run start

It will start your website and you can see it by going to the url localhost:3000. Then you will see your new homepage:

🎯 My Current Plan

As I said in the beginning, I want to create a blogging website and also I want to upload my portfolio to that website too. So for now I made a little list to what I should do next:

Change website theme
Modify project configuration
Work on custom Design and Layout
Add a search bar
Upload my first blog post
Deploy site in Vercel
Create an about page

As the project grows, new todos will be added to that list and I can't wait to see how it is going to be!

I will continue updating you about this project and since it's going to be an open source project I'll share the link with you as soon as it goes live!

I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)

How to add absolute paths to your TypeScript Project

Sean Yasnogorodski — Tue, 22 Nov 2022 21:57:45 +0000

In every project we've got to import something. It can be a file from somewhere else from the project or it can be a node module. Today I'm going to teach you how to become a pro at importing files and import a file the right way.

What do we need?

First, we need a TypeScript project. If you use a JavaScript project, then you need to add TypeScript to it. I'm going to create a new React project with TypeScript using Vite.

npx create-vite-app example --template react-ts

Since Vite doesn't install node dependencies automatically, we need to install it ourself.

cd example
npm i

After it will install all node dependencies in our project, we can open the project and start coding.

Coding an example

If you know what you're doing, you can skip this section and move on to the next section. If you're a beginner, you should continue reading and follow the example.

Let's create a utils folder inside src directory. Inside utils folder create a new file and call it index.ts. It should look like this:

Now let's create a function inside index.ts file:

export const addition = (first: number, second: number): number => {
    return first + second;
}

Now create a components folders and move App.tsx inside. After that open App.tsx file and try importing addition function from utils. You'll get something like this:

import { addition } from '../utils';

Our goal is to avoid all these ../ dots so we would have a very simple import that we can just copy and paste it without changing something throughout the project.

Creating our first absolute path

Open tsconfig.json file and go into "compilerOptions" section. At the end of the section add the following:

"paths": {
    "@utils/*": ["src/utils/*"]
}

And that is it! You created your first absolute path! You can back to App.tsx and change the import from:

import { addition } from '../utils';

to:

import { addition } from '@utils/index';

But let's go back for a second. Let's take a part the line that we added inside "paths" section in tsconfig.json file.

"@utils/*": ["src/utils/*"]

The name @utils is actually the prefix that we want to call before something we want to import from the utils folder. We can call it however we want. if we change @utils/* to @shrek/*, than every time we import something from the utils folder, it will look like this:

import { addition } from '@shrek/index';

Inside the array we have src/utils/*. We actually specify in this array all the files we'd like to import using the prefix we have defined.

And that's basically it! That's how you can add absolute paths into your project and make your imports much more shorter and much more satisfying!

I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)

How to add ESLint, Prettier, and Husky to your Web / NodeJS project

Sean Yasnogorodski — Sun, 20 Nov 2022 12:52:07 +0000

Every web developer that writes in NodeJS/React/NextJS/Angular/Vite should use ESLint, Prettier, and Husky. You must be familiar already with ESLint and maybe you have heard about the other two before but if not, I'm going to do some order in your head about each one and how you can use it and implement it in your own project. So let's get started.

Adding ESLint

ESLint is a straightforward linting tool that helps identify problematic patterns in your code before you build your code and also on the way while you're coding.

As a developer, one of my goals is to write better code with minimal errors to save time on debugging and failed builds. One way to get better with code syntax and get better coding is using ESLint. You can find problems quickly, fix problems automatically and you can configure it for yourself for how you like the code to be.

One quick way to add ESLint to your project is simply running the following line in your terminal:

npx eslint --init

After running this command you'd be asked a couple of questions and when it's done it'll install for you all the packages you need automatically and generate a .eslintrc.json file in your root folder.

You can add plugins to your ESLint config file and you can change the rules to how you like to write your code.

Adding Prettier

Prettier is a code formatter. When you add Prettier to your code you can integrate it with your editor and while you're saving the code will automatically format itself to your preferences.

It saves time in teams because it enforces the same code style and does it automatically so you don't have to argue each time in a code review that you forgot a semicolon at the end of a line.

In order to add Prettier to your project you need to install it via npm:

npm install --save-dev --save-exact prettier

After you add it to your project you can go into your editor's settings and change it to run Prettier so it can format your code each time you're saving a file. Also, you can add it to format your project each time you run a build or something like that.

You can use this line to format your code:

npx prettier --write .

Adding Husky

I guess if you come so far and you know more than coding, then you know about git. Husky is a tool that makes it easier to write git hooks and helps with your code flow.

For example, you can create a commit git hook that each time you do the command git commit then it will run tests, lint your code, lint your commit messages, and more! So let's see how we do that:

First, let's add Husky to our project:

npm install husky --save-dev

Second, enable git hooks:

npx husky install

Now you can create your first hook! Let's create a pre-commit hook:

npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit

After you run these commands you'll see a folder with the name .husky being created at the root of your project folder and it's the same pre-commit hook that we have created. You can now run git commit to see how it's working 😄

I really recommend to you use these three tools and you'll see how much your workflow will be improved and also see how you will write better code.

I hope you find this article useful and that you learn something new that you didn't know before. I'm more than happy to reply to any questions that you have on your mind :)

How To Structure React Project Files

Sean Yasnogorodski — Sun, 20 Nov 2022 11:38:45 +0000

There are a lot of different ways and approaches for creating a concrete project file structure for different coding frameworks. Today I’m going to bring you an approach that I’ve been using and structuring through my years in the industry that I think has more advantages than other project file structures you’ll see online.

Choosing a Framework

Before we start with anything, we first need to choose which framework library we’re going to use to write our project. You can select the default React framework library but you can also select a faster framework library that has been built on React. Here are two examples you can choose from:

Next.JS
Vite

Both are lightweight, powerful, and useful and I suggest choosing one of these two options over the default create-react-app option. For this example, I’m going to use Next.JS with TypeScript.

Creating Our Project

As I said earlier, I’m going to use Next.JS with TypeScript, and in case you don’t know or forgot how to create one, here’s the line of code using NPM.

npx create-next-app@latest --ts

After choosing a name and waiting for a minute, we get a blank Next.JS TypeScript project template.

Our New Folder Structure

src
    abstraction
        enums
        models
        types
    assets
        icons
        images
    components
    constants
    hooks
    mocks
    requests
    styles
    theme
    utils

So this is our new folder structure. As you can see we created around 13–15 different folders that we’re going to use with each one. Now let’s dive into an explanation for each folder.

Of course, outside of src folder there should be other folders such as node_modules and public, and there should be other files such as package.json, .gitignore and tsconfig.json. I won’t talk about these kinds of files and folders in this article.

Abstraction

This is a very unique folder and you won’t see it much in any online tutorial, blogs, videos, etc. It’s a personal preference that I found very useful and helps with navigating through the project much easier.

It contains three different folders:

enums
models
types

The reason we grouped these three folders into one is that we’ve got a lot of similarities between the three and the only difference is the declaration type.

For people that use interfaces instead/with types, you can add in abstraction folder an `interfaces folder too.

Assets

This folder can be placed in different places throughout the project and it depends on which framework you use. For now, I put it inside the src folder as the other folders.

Within these folders, all files that are not scripts and are being used in code should be placed. Examples of these kinds of assets:

Icons (Preferred to be SVG)
Images
Fonts
Gifs
Videos (Try to not save videos in project files and store them in the cloud and fetch them on start)

Components

Probably this folder would be the biggest folder in your project over time since you’re going to create more and more components that you’ll use in your project.

It’s important to keep here the components that are being reused through the project or that you think you might use somewhere in the future.

Also, there is a folder structure for a component folder. What I found useful is doing this:

component-name
    component-name.test.tsx
    component-name.tsx
    styles.css

The reason the name of the component file and the test file is the same name as the folder is that it’ll be much easier to search for files in your project. If it was just an index file then you’ll have to type component-name/index in order to get that file while you can just type component and you’ll get a reference for the component-name.tsx file much quicker.

If in your component there are other components that are only being used in that component and won’t be used in other components, you can create a components folder inside your component and put those files there.

In case you’re special and you do create test files and actually test your components, you should name the file as your component’s name with a following test or spec word (i.e. component-name.test.tsx). It’ll be much easier to find your file this way.

You can name your styles file however you like but since most of the time you rarely search for a specific component’s style file, I prefer to just name it as styles.tsx.

Constants

Sometimes you have a const value that won’t be changed and is used in different places inside your project or just a large const value that you’d like to save in a separate folder instead of where you’re using it. All these kinds of variables should be inside a constants folder.

Hooks

I really encourage you to create your own custom hooks. A lot of people don’t realize the potential you can get by creating custom hooks. Basically, if you have a couple of components with the same logic, you can just extract that logic into custom hooks and use that hook within those components.

In addition, if you create a custom hook, don’t forget to test it.

Mocks

Sometimes you use mock data instead of real data because you use it in testing, saving requests in development mode or even instead of a route that hasn’t built yet but you know how the data should come. Here you put all your mock files and forget about it.

Requests

Almost in any project, you’ll have to make requests to fetch, create, delete and mutate data. Here you should put all requests you’re going to make to external APIs. In each request file, you should write a simple function that fetches an API request with validation.

Styles

Each component has its own style file but when your project gets bigger and bigger, some components will have common styles. Those kinds of common styles should be extracted from those components and be in a separate file inside src/styles folder.

Theme

Usually, when you use a components design framework library, there is a theme that you can create/edit. This kind of file should be here to get much easier access each time you’d like to edit something in your theme.

Utils

Last and not least — the utils folder. A simple folder that contains repetitive util functions that you use throughout your project. For example, a utils function that converts an image to base64 format should be in utils folder.

So this is my way of organizing my folder structure in my React projects that I find very useful for navigating and saving in the right order.

There is also a lot more stuff that we didn’t talk about such as absolute imports, ESLint, Prettier, Husky, testing, and more. I encourage you to read about these topics too and step up your skills and make your project look and feel so much better.

I hope you find this article useful and that you learn something new that you didn’t know before I’m more than happy to reply to any questions that you have on your mind :)

Forem: Sean Yasnogorodski

Handling Icons in React: Best Practices

Why I Switched to SVGs

Creating Icon Components

Organizing Icons in React

Discovering @svgr/cli

Generating Icon Components Automatically

Building a Flexible Icon Component

Step 1: Define Icon Type

Step 2: Create the Icon Component

Step 3: Styling the Icons

Automating Icon Generation

The Final Flow

Starting a new blogging journey with Docusaurus

🦖 What is actually Docusaurus?

✍🏻 Why I chose Docusaurus to write blogs?

🏁 Let's get started!

🎯 My Current Plan

How to add absolute paths to your TypeScript Project

What do we need?

Coding an example

Creating our first absolute path

How to add ESLint, Prettier, and Husky to your Web / NodeJS project

Adding ESLint

Adding Prettier

Adding Husky

How To Structure React Project Files

Choosing a Framework

Creating Our Project

Our New Folder Structure

Abstraction

Assets

Components

Constants

Hooks

Mocks

Requests

Styles

Theme

Utils

Building a Flexible `Icon` Component

Step 2: Create the `Icon` Component