v10/packages/react/react-icons/svgr.config.js

import path from 'node:path';

export default {
  plugins: ['@svgr/plugin-jsx'],
  typescript: true,
  jsxRuntime: 'automatic',
  icon: false, // Don't set height/width attributes.
  expandProps: 'end',
  svgProps: {
    'aria-hidden': 'true',
  },
  replaceAttrValues: {
    '#000': '{color}',
    '#fff': '{color}',
    black: '{color}',
    white: '{color}',
    currentColor: '{color}',
  },
  template: (variables, { tpl }) => {
    return tpl`
/**
 * @fileoverview Auto-generated React component from SVG
 *
 * This file is automatically generated by SVGR from SVG files located in:
 * packages/core/icons/assets/
 *
 * DO NOT EDIT THIS FILE DIRECTLY.
 *
 * To modify this icon:
 * 1. Edit the corresponding SVG file in packages/core/icons/assets/
 * 2. Run \`pnpm -F react-icons generate:icons\` in this package to regenerate components
 *
 * @generated
 */
import type { IconProps } from '../types';

${variables.interfaces};

const ${variables.componentName} = ({ color = 'currentColor', ...props }: IconProps): JSX.Element => (
  ${variables.jsx}
);

${variables.exports};
`;
  },
  indexTemplate: (filePaths) => {
    const exportEntries = filePaths.map(({ path: filePath }) => {
      const basename = path.basename(filePath, path.extname(filePath));
      const componentName = /^\d/.test(basename) ? `Svg${basename}` : basename;
      const iconName = `${componentName}Icon`;
      return `export { default as ${iconName} } from './${basename}';`;
    });

    const header = `/**
 * @fileoverview Auto-generated index file for React icon components
 *
 * This file is automatically generated by SVGR from SVG files located in:
 * packages/core/icons/assets/
 *
 * DO NOT EDIT THIS FILE DIRECTLY.
 *
 * To modify icons or add new ones:
 * 1. Add/edit SVG files in packages/core/icons/assets/
 * 2. Run \`pnpm -F react-icons generate:icons\` in this package to regenerate components
 *
 * @generated
 */
`;

    return `${header + exportEntries.join('\n')}\n`;
  },
};