fix: remove double "Icon" suffix for Circle, Path, and Infinity components

[nathankim0]

Summary

This PR fixes a bug in the icon generator that was causing certain icon components to have a double "Icon" suffix in their exports.

Problem

The generator was incorrectly appending "Icon" suffix twice for components defined in componentNameMap (Circle, Path, Infinity), resulting in:

• CircleIconIcon instead of CircleIcon
• PathIconIcon instead of PathIcon
• InfinityIconIcon instead of InfinityIcon

Solution

Updated the componentNameMap in generator/generate-svg.mjs to not include the "Icon" suffix, as it's already added by the generator in the export statements.

// Before
const componentNameMap = {
  Circle: 'CircleIcon',
  Path: 'PathIcon',
  Infinity: 'InfinityIcon',
};

// After
const componentNameMap = {
  Circle: 'Circle',
  Path: 'Path',
  Infinity: 'Infinity',
};

Impact

After regenerating the icons with this fix:

• The deprecated export names remain unchanged (Circle, Path, Infinity)
• The new suffixed exports are now correctly named (CircleIcon, PathIcon, InfinityIcon)
• This aligns with the pattern used for all other icons in the library

Test plan

• Updated the generator code
• Ran npm run generate to regenerate all icons
• Verified that Circle, Path, and Infinity components now export with correct naming
• Checked that the deprecated aliases are preserved for backward compatibility

[mrkpatchaa]

Hi @nathankim0 thanks for reporting.
I think that we should keep the mapping for backward compatibility.
But I changed the code a little bit to fix the issue.
Please check and let me know what you think.

/* global process:readable */

import { fileURLToPath } from 'url';
import { transform } from '@svgr/core';
import path from 'path';
import fs from 'fs-extra';
import Case from 'case';
import chalk from 'chalk';
import * as prettier from 'prettier';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const options = {
  icon: true,
  native: true,
  typescript: false,
  titleProp: false,
  replaceAttrValues: { '#000': '{props.color}' },
  svgProps: {
    width: '{props.size}',
    height: '{props.size}',
  },
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
};

const svgsDir = path.join(__dirname, '../core/assets');

const weights = {
  bold: 'bold',
  duotone: 'duotone',
  fill: 'fill',
  light: 'light',
  regular: 'regular',
  thin: 'thin',
};

const componentNameMap = {
  Circle: 'CircleIcon',
  Path: 'PathIcon',
  Infinity: 'InfinityIcon',
};

// Some duotone colors do not have a color and opacity
const duotoneEscape = ['cell-signal-none', 'wifi-none'];

const srcDir = path.join(__dirname, '../src');

const generateIconsDefs = async (icon, weight) => {
  const iconName = weight === 'regular' ? `${icon}` : `${icon}-${weight}`;

  const filePath = path.join(svgsDir, `${weight}/${iconName}.svg`);

  const svgCode = fs.readFileSync(filePath, {
    encoding: 'utf-8',
  });

  const componentName = Case.pascal(
    filePath.replace(/^.*\//, '').replace(/\.svg$/, '')
  ).replace(RegExp(`${Case.capital(weight)}$`), '');

  const tsCode = await transform(svgCode, options, {
    componentName,
  });

  return [...tsCode.matchAll(/<Path.*? \/>/g)]
    .map((m) => m[0])
    .map((p) =>
      p.replaceAll(
        'opacity={0.2}',
        'opacity={duotoneOpacity} fill={duotoneColor}'
      )
    )
    .join('\n');
};

const getIconList = () => {
  const files = fs
    .readdirSync(path.join(svgsDir, 'regular'))
    .filter((file) => file.endsWith('.svg'))
    .map((file) => file.replace(/\.svg$/, ''));

  // We want to generate only a subset for the icons to test
  // yarn generate true
  if (process.argv[2] === 'true') {
    return files.filter((file) =>
      [
        'acorn',
        'palette',
        'pencil-line',
        'swap',
        'list',
        'test-tube',
        '',
      ].includes(file)
    );
  }
  return files;
};

const generateAllIconsDefs = () => {
  const icons = getIconList();

  console.log(`There are ${chalk.blue(icons.length)} icons`);

  icons.forEach(async (icon) => {
    const weightValues = Object.values(weights);
    const defs = {};
    for (let index = 0; index < weightValues.length; index++) {
      const weight = weightValues[index];
      defs[weight] = await generateIconsDefs(icon, weight);
    }

    let defString = await prettier.format(
      `\
/* GENERATED FILE */
import type { ReactElement, FC } from 'react';
import { Path } from 'react-native-svg';
import { type IconWeight } from '../lib';

export default new Map<IconWeight, ReactElement | FC<{ duotoneColor?: string; duotoneOpacity?: number }>>([
${Object.entries(defs)
  .map(
    ([weight, jsx]) =>
      `["${weight}", ${weight === 'duotone' ? (duotoneEscape.includes(icon) ? '() =>' : '({duotoneColor,duotoneOpacity}: {duotoneColor?: string;duotoneOpacity?: number;}) => ') : ''}(<>${jsx.trim()}</>)]`
  )
  .join(',\n')}
]);
`,
      { semi: true, parser: 'babel-ts', singleQuote: true }
    );
    // console.log(defString);
    const outDir = path.join(srcDir, 'defs');

    fs.ensureDirSync(outDir);

    fs.writeFileSync(path.join(outDir, `${Case.pascal(icon)}.tsx`), defString);
  });
};

const generateMainIconFile = (icon) => {
  const component = Case.pascal(icon);
  const componentCode = `import { type Icon, type IconProps } from 'phosphor-react-native'

import IconBase from "../lib/icon-base";
import weights from '../defs/${component}'

const I: Icon = ({...props }: IconProps) => (
  <IconBase {...props} weights={weights} name="${icon}" />
)

/** @deprecated Use ${component}Icon */
export const ${componentNameMap[component] || component} = I
export { I as ${component}Icon }`;

  const filePath = path.join(__dirname, '../src/icons', `${component}.tsx`);

  fs.ensureDirSync(path.join(__dirname, '../src/icons'));

  // console.log(template)
  fs.writeFileSync(filePath, `/* GENERATED FILE */\n${componentCode}`);
};

const generateAllIconMainFile = () => {
  const icons = getIconList();

  icons.forEach((icon) => generateMainIconFile(icon));
};

const generateIndexFile = () => {
  const icons = getIconList();
  const iconsExport = icons
    .map((icon) => `export * from './icons/${Case.pascal(icon)}';`)
    .join('\n');

  const fileContent = `/* GENERATED FILE */
export { type Icon, type IconProps, IconContext, type IconWeight } from './lib';

${iconsExport}
`;

  fs.writeFileSync(path.join(__dirname, '../src', 'index.tsx'), fileContent);
};

const cleanup = () => {
  const folders = ['icons', 'defs'];
  for (let index = 0; index < folders.length; index++) {
    fs.removeSync(srcDir + '/' + folders[index]);
  }
  fs.removeSync(srcDir + '/index.tsx');
};

cleanup();
generateAllIconsDefs();
generateAllIconMainFile();
generateIndexFile();

[nathankim0]

@mrkpatchaa Thank you for the review and suggestion! Your approach is indeed better as it maintains backward compatibility while fixing the double suffix issue.

I understand the key changes:

1. Keep componentNameMap for backward compatibility
2. Remove the componentNameMap usage from generateIconsDefs (line 62)
3. Use componentNameMap only for the deprecated export, not for the new Icon-suffixed export

This elegantly solves the problem without breaking existing code that might depend on the current export names. I'll update my PR with your suggested changes.

[mrkpatchaa]

Thank you @nathankim0
I published a new release with your updates in #81 .