Overview

The remix-sprites-example is a script that combines a folder of .svg files into a single sprites.svg file and generates type definitions for safe usage. It includes a compilation script, a sprite component, and instructions for installation and usage.

Features

• Folder scanning: The script scans the input folder for .svg files.
• Id generation: For each .svg file, it generates an id based on the file path.
• Virtual DOM manipulation: The script parses the file contents in a virtual DOM and replaces the <svg> element with a <symbol> element, copying attributes and children.
• Id assignment: It adds the generated id to the new symbol element.
• Output generation: The script wraps each new <symbol> element in a parent <svg> and outputs the outerHTML to a specified path.
• TypeScript type generation: It generates TypeScript types based on the compiled sprites and outputs them to a specified path.
• Sprite component: The package includes a React component, Sprite.tsx, that renders the compiled sprites.
• Preloading: It provides a method to export a preload link using Remix’s Links function, which hints to the browser that the sprites file needs to be loaded soon.

Installation

To use the remix-sprites-example, follow these steps:

1. Clone the repository.
2. Install the required dependencies by running npm install.
3. Compile the sprites by running npm run build:sprites.
4. Start the development server by running npm run dev.
5. Open your browser and navigate to http://localhost:3000 to view the index.

Summary

The remix-sprites-example is a handy script for combining .svg files into a single sprites.svg file and generating TypeScript type definitions. It provides an efficient way to manage and use sprites in web applications. The package includes a compilation script, a React component for rendering sprites, and instructions for installation and usage. It also offers potential improvements for automatic regeneration of sprites, handling parsing errors, and conducting comprehensive testing with different types of SVGs.