A small twist, applied everywhere.

// =============================================================
// Pitvolt - <PvIcon> React wrapper
//
// Single component. Single prop. Applies the brand "twist" (clay-red
// corner notch + yellow voltage spark) to any react-icons glyph.
//
// Usage:
//   import { PvIcon } from './PvIcon';
//   <PvIcon name="plug" />
//   <PvIcon name="lightning" size="lg" />
//   <PvIcon name="warning" tone="warning" />
//   <PvIcon name="check" filled />
//   <PvIcon name="external-link" plain />     // no twist
//
// Requires:  npm i react-icons
// And:       import './icons.css'  (in your entrypoint)
// =============================================================

import React from 'react';
import {
  // Nav / UI
  PiList, PiX, PiArrowUpRight, PiCaretDown, PiArrowSquareOut, PiMagnifyingGlass,
  // Charging
  PiPlug, PiLightning, PiBatteryHigh, PiGauge, PiChargingStation, PiCar,
  // Host
  PiMapPin, PiBuildings, PiKey, PiCalendarBlank,
  // Status
  PiCheck, PiWarning, PiInfo, PiXCircle,
  // Social
  PiInstagramLogo, PiXLogo, PiLinkedinLogo, PiWhatsappLogo, PiEnvelope,
} from 'react-icons/pi';

// Map friendly names → react-icons component
const REGISTRY = {
  // Nav / UI
  'menu':           PiList,
  'close':          PiX,
  'arrow':          PiArrowUpRight,
  'chevron-down':   PiCaretDown,
  'external-link':  PiArrowSquareOut,
  'search':         PiMagnifyingGlass,
  // Charging
  'plug':           PiPlug,
  'lightning':      PiLightning,
  'battery':        PiBatteryHigh,
  'gauge':          PiGauge,
  'station':        PiChargingStation,
  'car':            PiCar,
  // Host
  'map-pin':        PiMapPin,
  'building':       PiBuildings,
  'key':            PiKey,
  'calendar':       PiCalendarBlank,
  // Status
  'check':          PiCheck,
  'warning':        PiWarning,
  'info':           PiInfo,
  'x-circle':       PiXCircle,
  // Social
  'instagram':      PiInstagramLogo,
  'x':              PiXLogo,
  'linkedin':       PiLinkedinLogo,
  'whatsapp':       PiWhatsappLogo,
  'mail':           PiEnvelope,
};

export const ICON_NAMES = Object.keys(REGISTRY);

/**
 * @param {Object} props
 * @param {string} props.name      - one of ICON_NAMES
 * @param {'xs'|'sm'|'md'|'lg'|'xl'|number|string} [props.size='md']
 *        Preset key, or a px/css value. Numbers become px.
 * @param {boolean} [props.filled]   - solid glyph instead of outline
 * @param {boolean} [props.plain]    - drop the brand twist (notch + spark)
 * @param {'default'|'warning'|'success'|'info'} [props.tone='default']
 * @param {string} [props.title]     - accessible label; if omitted, icon is aria-hidden
 * @param {string} [props.className] - extra classes on wrapper
 * @param {Object} [props.style]     - extra inline styles on wrapper
 */
export function PvIcon({
  name,
  size = 'md',
  filled = false,
  plain = false,
  tone = 'default',
  title,
  className = '',
  style,
  ...rest
}) {
  const Glyph = REGISTRY[name];
  if (!Glyph) {
    if (typeof console !== 'undefined') {
      console.warn(`[PvIcon] unknown name "${name}". Known names:`, ICON_NAMES);
    }
    return null;
  }

  const sizePresets = ['xs', 'sm', 'md', 'lg', 'xl'];
  const sizeClass = sizePresets.includes(size) ? `pv-icon--${size}` : '';
  const sizeStyle =
    !sizePresets.includes(size)
      ? { '--pv-icon-size': typeof size === 'number' ? `${size}px` : size }
      : null;

  const classes = [
    'pv-icon',
    sizeClass,
    filled && 'pv-icon--filled',
    plain && 'pv-icon--plain',
    tone !== 'default' && `pv-icon--${tone}`,
    className,
  ].filter(Boolean).join(' ');

  const a11y = title
    ? { role: 'img', 'aria-label': title }
    : { 'aria-hidden': true };

  return (
    <span
      className={classes}
      style={{ ...sizeStyle, ...style }}
      {...a11y}
      {...rest}
    >
      <Glyph />
      {!plain && tone !== 'warning' && tone !== 'success' && (
        <span className="pv-icon__notch" aria-hidden="true" />
      )}
      {!plain && (
        <span className="pv-icon__spark" aria-hidden="true" />
      )}
    </span>
  );
}

export default PvIcon;