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.

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.

Nakleiderer

Remix Sprites Example