Чтобы определить тип значка SVG как реквизита в ReactJS, вы можете использовать следующие методы:

Метод 1: использование строкового реквизита

В этом методе вы можете передать тип значка SVG в качестве строкового свойства в ваш компонент React. Вот пример:

import React from 'react';
import PropTypes from 'prop-types';
const Icon = ({ type }) => {
  // Render the SVG icon based on the type prop
  return (
    <svg>
      {/* SVG icon code */}
    </svg>
  );
};
Icon.propTypes = {
  type: PropTypes.string.isRequired,
};
export default Icon;

Затем вы можете использовать компонент Iconи передать тип в качестве свойства:

<Icon type="home" />

Метод 2: использование свойства Enum

Другой подход — использовать свойство enum для определения типа значка SVG. Это обеспечивает безопасность типов и предоставляет предопределенный набор опций. Вот пример:

import React from 'react';
import PropTypes from 'prop-types';
const IconType = {
  Home: 'home',
  User: 'user',
  Settings: 'settings',
};
const Icon = ({ type }) => {
  // Render the SVG icon based on the type prop
  return (
    <svg>
      {/* SVG icon code */}
    </svg>
  );
};
Icon.propTypes = {
  type: PropTypes.oneOf(Object.values(IconType)).isRequired,
};
export default Icon;

Затем вы можете использовать компонент Iconи передать тип в качестве свойства:

<Icon type={IconType.Home} />

Метод 3: использование свойств компонента

В этом методе вы можете создать отдельные компоненты значков SVG для каждого типа и использовать тип в качестве реквизита для визуализации соответствующего компонента. Вот пример:

import React from 'react';
const HomeIcon = () => {
  return (
    <svg>
      {/* SVG icon code for home */}
    </svg>
  );
};
const UserIcon = () => {
  return (
    <svg>
      {/* SVG icon code for user */}
    </svg>
  );
};
const SettingsIcon = () => {
  return (
    <svg>
      {/* SVG icon code for settings */}
    </svg>
  );
};
const Icon = ({ type }) => {
  switch (type) {
    case 'home':
      return <HomeIcon />;
    case 'user':
      return <UserIcon />;
    case 'settings':
      return <SettingsIcon />;
    default:
      return null;
  }
};
export default Icon;

Затем вы можете использовать компонент Iconи передать тип в качестве свойства:

<Icon type="home" />