rajibola

Simplifying Icon Usage and Management in React Applications

Icons are a fundamental element in modern user interfaces, providing visual cues and enhancing the overall user experience. In React applications, managing and utilizing icons efficiently can be a challenge, especially as the number of icons grows. In this article, we'll explore a solution to simplify icon usage and management by creating a reusable icon component and automating the generation of icon components from SVG files.

The Problem

In typical React applications, developers often import icons individually whenever they are needed. This approach can lead to a cluttered codebase, with numerous import statements scattered throughout the application. As the number of icons increases, managing and updating these individual imports becomes tedious and error-prone. Additionally, ensuring consistent styling and formatting across different icon components can be challenging.

Introducing a Reusable Icon Component

rajibola

import React from 'react'
import * as icons from './icons'
const iconsObj = icons

export interface Props extends React.SVGProps<SVGSVGElement> {
    name: keyof typeof iconsObj
}

export const Icon = ({ name, ...props }: Props) => {
    const DynamicComponent = iconsObj[name]

rajibola

/**
 *
 * @param data
 * @param keys
 * @param keywords
 * @returns filtered items as objects in array``
 */
export const useSearch = (
  data: any[],
  keys: string[],