Icons

In Sora Chill, we use an svg spritesheet to manage icons. This allows us to use icons as components and easily customize them. The icons are used in buttons, links, and other components.

A spritesheet is a single image that contains many sprites (icons in our case). This is one of the oldest tactics to optimize image loading. Instead of loading many small images, we load a single image and use code to display only the part we need.

Setup

We use svg-icons-cli to manage our icons. This tools allows us to generate a spritesheet from a folder of SVG icons and set up with a TypeScript-ready, Tailwind-ready Icon component.

List of Icons

Here are some of the icons that we use in Sora Chill: