Icons

Why icons are set up this way, and the workflow for adding new ones.

Approach

I'm going to be honest with you, icons are a huge pain in the ass. There are a lot of packages where you can import icons from the top libraries, which work well. However, the issue is that once you start mixing in custom icons, then you have multiple icon conventions at the same time, and it gets messy.

So that's why I set up icons the way I do, so any SVG can be used. To do this, I create an IconBase that wraps all my icons, and each icon gets its own file and export. I tend to use Material Icons and follow their naming convention.

The other nice thing about this icon convention is that because we're using a facade pattern, if you wanted to mix and match or swap out the icons, you easily can.

See the Icons UI page for the full list of icons bundled with the starter.

Recommended Workflow

Find the icon you want on Material Icons.
Create a new file in src/ui/icons/ with the same name as the Material icon (e.g. SettingsIcon.tsx).
Copy the IconBase template below and paste in the SVG path from Material.
Export it from src/ui/icons/index.ts.

src/ui/icons/SettingsIcon.tsx

import { IconBase } from "./IconBase";
import type { IconProps } from "./types";

export function SettingsIcon(props: IconProps) {
  return (
    <IconBase {...props}>
      <path d="..." />
    </IconBase>
  );
}