Improving Icon Development with TypeScript: Adding TypeScript Support to IcoMoon

introduction

As web development has become increasingly complex, the importance of using typed languages like TypeScript has become more and more evident. TypeScript provides a number of benefits over plain JavaScript, including type checking, better IDE support, and improved code maintainability.

When it comes to working with icons, having type safety can be especially helpful. For example, when working on a large codebase with many different icons, it can be easy to make mistakes and accidentally use the wrong icon or misspell an icon name. With TypeScript, you can catch these errors at compile time, before they become runtime errors that are more difficult to track down.

IcoMoon is a powerful icon management tool that allows you to create and use custom icon packs in a variety of different formats. By adding TypeScript support to IcoMoon, you can further improve the development experience and ensure that your code is as maintainable and error-free as possible. With TypeScript definitions for your icons, you can use your icons with confidence, knowing that you won't run into issues caused by misspellings or incorrect types. Overall, adding TypeScript support to IcoMoon can help make your web development process smoother and more productive.

Generating a TypeScript File for IcoMoon

Once you have selected your icons from the IcoMoon App, you will receive a zipped folder containing a selection.json file. This file is used to generate the IconsType.ts file, which provides type definitions for your icons.

To generate the IconsType.ts file, you can use the following script:

const { writeFile } = require('fs');
const { icons } = require('./selection.json');

const fileDestination = 'dist/icomoon/IconsType.ts';

const body = icons.map((e) => `'${e.properties.name}'`).join(' | ');
const result = `export type IconType = ${body}`;

writeFile(fileDestination, result, function (err) {
  if (err) return console.log('Something went wrong while generating IconsType.ts.\n', err);
  console.log(`\n\t Successfully generated TypeScript file: ${fileDestination}`);
});

This code will automatically generate type definitions for your IcoMoon icons, providing improved type safety and code maintainability.

After generating the IconsType.ts file, you can add the following script to your package.json to run the above script:

"scripts": {
  "generate-icons": "node ./path/to/your/generate-icons.js"
}

You can then run npm run generate-icons to generate the IconsType.ts file.

Create Icon Component That Uses IconsType.ts

Here is an example of a TypeScript-based React component that utilizes the IconsType.ts file to provide type safety when working with IcoMoon icons:

import type { IconType } from './IconsType.ts';
import { iconSelection } from './selection.json';
import type { IconProps as IconMoonProps } from 'react-icomoon';
import IcoMoon from 'react-icomoon';

export interface IconProps extends Omit<IconMoonProps, 'icon'> {
  icon: IconType;
}

function Icon(props: IconProps): JSX.Element {
  return <IcoMoon {...props} iconSet={iconSelection} />;
}

export default Icon;

In this code, we first import the IconType type definition from the IconsType.ts file, as well as the iconSelection object from the selection.json file. We also import the IconProps type from the react-icomoon package, and the IcoMoon component itself.

Next, we define the IconProps interface, which extends the IconMoonProps interface but replaces the icon property with the