seti-ui-file-icons

File icons from Seti-UI

All of the icons come from jesseweed/seti-ui. This repo just packages them up so you can use them with npm install.

This package is primarily intended for use in static sites. All of the icons are stored in a JSON file as SVG strings. For most static sites, you only want a few icons on a page (and will likely reuse the same few icons across the entire site). As a result, it is best to inline the icons in the pages.

In other cases, this approach does not make sense. For example, in a webapp where the icons are used dynamically, it would likely be better to use an SVG spritesheet to enable caching of the icons instead of bundling 100K of SVG strings.

Usage

By default, the color name from Seti-UI is returned for icons.

import { getIcon } from "@peoplesgrocers/seti-ui-file-icons";

const { svg, color } = getIcon("README.md");

To replace the color keywords, use themeIcons.

import { themeIcons } from "@peoplesgrocers/seti-ui-file-icons";

const getIcon = themeIcons({
  blue: "#268bd2",
  grey: "#657b83",
  "grey-light": "#839496",
  green: "#859900",
  orange: "#cb4b16",
  pink: "#d33682",
  purple: "#6c71c4",
  red: "#dc322f",
  white: "#fdf6e3",
  yellow: "#b58900",
  ignore: "#586e75",
})

const { svg, color } = getIcon("README.md");

Development

Available Scripts

In the project directory, you can run:

./build/build.sh

Runs a complete build from a fresh install

npm run build

Builds the package using typescript into ./lib

npm run extract

Processes the icons and styles in seti-ui into JSON files

npm test

Uses UVU to run tests.

npm run lint

Checks code for style issues and syntax errors with TSLint and Prettier.

npm run lint:fix

Checks code for style issues and syntax errors with TSLint and Prettier, attempting to fix them when possible.

SVGO Version Note

This project currently uses SVGO version 1.6, while the latest version is 4.0.0 (as of Aug 2025). An attempt was made to upgrade to the newer version, but after spending approximately 1 hour trying to configure SVGO 4.0.0 to produce the same SVG paths as the original 1.6 version, visual differences remained that could not be adequately resolved. To maintain the integrity and consistency of the existing icons, the decision was made to continue using the original SVGO 1.6 configuration.

Publishing a new version

Manually