React - Components

A veces creo estructura de componentes para proyectos en los que trabajo, pero con el tiempo olvido cómo los hice, por eso dejo esto y de una vez los comparto.

Iconos dinámicos

Los iconos en formato svg los tengo guardados en una carpeta assets/icons.

Creo un archivo iconNames.ts que contiene los nombres de los iconos (El nombre de los iconos es el mismo que en el archivo svg):

export type iconName =
  | 'icon_phone',
  | 'icon_home',
  ...

Archivo de los patchs de los iconos iconPaths.ts:

import IconPhone from './assets/icons/icon_phone.svg';
...

interface PathsTypes {
  [key: string]: any;
}

export const allPaths: PathsTypes = {
  icon_phone: IconPhone,
  ...
}

Y por último el componente Icon.tsx:

import React from 'react';
import { allIcons } from './iconNames';
import { allPaths } from './iconPaths';

export interface Props extends React.HTMLAttributes<HTMLDivElement> {
  name: allIcons;
  color?: string;
  width?: number;
  height?: number;
}

const Icon: React.FC<Props> = ({ name, color = "#009933", width = 15, height = 15, ...props }) => {
  const DynamicIcon = allPaths[name];

  return (
    DynamicIcon ?
      <DynamicIcon width={width} height={height} color={color} {...props} />
      : null
  )
}

export default Icon