Did you read the question?
Well if you think so, we're on the same bandwagon. Here's a short, crisp, concrete guide for creating such components.

The reason to have custom icon components can be many. Are the following any of the reasons in your case:
1) Want the ownership of icons.
2) You have created some new icons and want to use them?
3) Want to create an icon library?
or something else.

---

What Prompted Me?

There can be plenty of reasons to get started but in my scenario, the reason was primarily the non-availability of the preferred icons. I looked up various libraries and didn't find one.

The most used libraries by me (up until now) are:
1) Heroicons
2) Iconoir
3) Remix Icons

Figma Design

Figma (for now) is the design tool I opt for when it comes to designing. The icon you see is exactly what I created along with an other one.

Code Execution, Research and Answer to All Your Why(s)

Part A

If you've ever used an icon library in React, you've probably come across using them as fonts, components, direct links, etc. By component-based usage, I mean something used this way: <HelloIcon />.

As part of my research and to know how people have built these icon libraries enabling React developers to use these icons, I went through the code behind some of the icons in node_modules file.

1) The general scenario I found was, that they have icons in SVG format. SVG is the go-to choice for icons because of their scalable nature.
2) And these SVG codes were somehow wrapped in a React code. tsx or jsx, according to choice.

Note: Making components have more granularity can be achieved by incorporating a variety of props.

<div style="font-size: 24px;">
  <i class="ri-admin-line ri-fw"></i> <!-- fixed width -->
  <i class="ri-admin-line ri-xxs"></i> <!-- 0.5em -->
  <i class="ri-admin-line ri-xs"></i> <!-- 0.75em -->
  <i class="ri-admin-line ri-sm"></i> <!-- 0.875em -->
  <i class="ri-admin-line ri-1x"></i> <!-- 1em -->
  <i class="ri-admin-line ri-lg"></i> <!-- 1.3333em -->
  <i class="ri-admin-line ri-xl"></i> <!-- 1.5em -->
  <i class="ri-admin-line ri-2x"></i> <!-- 2em -->
  <i class="ri-admin-line ri-3x"></i> <!-- 3em -->
  ...
  <i class="ri-admin-line ri-10x"></i> <!-- 10em -->
</div>

Part B

I wanted to go with a very simple approach i.e., incorporating the use of class prop as className (for React). This would allow the use of Utility classes and that's something that makes development a lot easier.

interface IconTypes {
    className ?: string;
}

export function PrimaryDI({ className }: IconTypes) {
    return (
        <svg
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className={` h-6 w-6 ${className} `}
        >
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.67041 10.3815C-0.22347 11.2754 -0.22347 12.7246 0.67041 13.6185L2.84442 15.7925V18.8668C2.84442 20.1309 3.8692 21.1557 5.13334 21.1557H8.20759L10.3815 23.3296C11.2754 24.2235 12.7246 24.2235 13.6185 23.3296L15.7924 21.1557H18.8669C20.131 21.1557 21.1558 20.1309 21.1558 18.8668V15.7923L23.3296 13.6185C24.2235 12.7246 24.2235 11.2754 23.3296 10.3815L21.1558 8.2077V5.13323C21.1558 3.86909 20.131 2.84431 18.8669 2.84431H15.7924L13.6185 0.67041C12.7246 -0.22347 11.2754 -0.22347 10.3815 0.67041L8.20759 2.84431H5.13334C3.8692 2.84431 2.84442 3.86909 2.84442 5.13323V8.20748L0.67041 10.3815ZM7.86683 17.1729H10.1558V14.3499H13.2077C15.5729 14.3499 17.0988 12.9918 17.0988 10.6418C17.0988 8.29186 15.5729 6.94903 13.2077 6.94903H7.86683V17.1729ZM10.1558 9.00906H12.9635C14.23 9.00906 14.8252 9.39055 14.8252 10.6418C14.8252 11.9236 14.23 12.2898 12.9635 12.2898H10.1558V9.00906Z" fill="white"/>
        </svg>
    );
}

How to get the SVG code for icons? (Part C)

There are tons of tools available on the internet but if you're someone using Figma, it's fairly a cake-walk.

1) Create your icon or any design for that matter.
2) Make sure to export it as SVG.
3) On the export tab in Figma, there's a dropdown having four options as shown in the picture, select SVG.

There you are.
4) Now open your code editor, view this file there, and you'll find the SVG in place.

Finally, customize your code.

Part D

You can finally import it and start using it. Here's how you can use it.

Thank you for your read. I hope you've got some good insights.
I often share things out of my learnings, so nothing's fancy, you're most welcome to come share and learn things on my Twitter and YouTube handles.