Welcome to Chassis Icons

Introduction

Chassis Icons is an icon library creator: a repository that a team owns, fills with its own SVG files and builds into an icon font, an SVG sprite and optimized SVG files, with a site that shows the set. The build is file-driven. Save <name>.svg into source/, and the icon is in the output of the next build. There is no list to maintain beside the files.

The repository is made to be owned and customized, as Chassis Tokens and Chassis Assets are. A team that adopts it replaces the files of source/ and the chassis.build block of packages/icons/package.json, and never the build. The font name, the class prefix, the frame and the styles of the icons are settings.

The icons in the repository are the Chassis set: the icons that the Chassis documentation sites and Figma libraries use, published as @chassis-ui/icons. These pages use that set in their examples. The quick start covers both ways to begin: installing the Chassis set, and building a set of your own.

What a set is

A set is the icons of one repository: the SVG files of source/, and what the build writes from them. One repository builds one set.

source/                   -> The SVG files you save, one per icon. The build only reads them
packages/icons/           -> The package of the set
  svgs/                   -> Output: one optimized SVG file per icon
  icons/                  -> Output: the font, its stylesheets and the sprite
  codepoints.json         -> The code point of each icon. Written by the build
  package.json            -> The details of the package and the chassis.build configuration
  build/                  -> The build
packages/site/            -> The site that shows the set

The name of a file is the name of its icon, and that name is everything a project needs to draw the icon: it is the symbol of the sprite, the last part of the class of the font, and the name of the optimized file.

What the build writes

The build writes two folders, and their shape is the same for any set. <font> is the font name of the configuration, <prefix> its class prefix, and <name> the name of an icon.

The output is committed to the repository and published as it is, so a project installs the set without building it. The pages of Use in Project show how a page draws an icon from each of these files.

What reads a set

Chassis CSS, Chassis React and Chassis Assets take any set that keeps this shape. None of them names the Chassis set in a way that a team cannot configure.

Next steps

Continue with one of these pages:

• Quick start: install the Chassis set, or build a set of your own.
• Build system: the commands, the configuration and the checks.
• Frame and color: what an SVG file needs to be an icon of a set.