# svg-color-linter

> Linting tool to check if SVG files use only colors of a given color palette

Latest version **3.1.0** (published 2026-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg-color-linter
pnpm add svg-color-linter
yarn add svg-color-linter
bun add svg-color-linter
```

Provides the command `svg-color-linter`.

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2026-08-23 |
| First published | 2022-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7 |
| Author | Material Extensions |
| Maintainers | pkief |
| Keywords | SVG, Linter, Colors |

## Links

- npm: https://www.npmjs.com/package/svg-color-linter
- Repository: https://github.com/material-extensions/svg-color-linter
- Homepage: https://github.com/material-extensions/svg-color-linter/blob/main/README.md
- Issues: https://github.com/material-extensions/svg-color-linter/issues
- npm.io page: https://npm.io/package/svg-color-linter

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^13.0.6
- [is-svg](https://npm.io/package/is-svg.md) ^6.1.0
- [is-glob](https://npm.io/package/is-glob.md) ^4.0.3
- [js-yaml](https://npm.io/package/js-yaml.md) ^5.3.0
- [minimist](https://npm.io/package/minimist.md) ^1.2.8
- [chroma-js](https://npm.io/package/chroma-js.md) ^3.2.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2026-08-23
- 3.0.0 — 2024-12-11
- 2.0.3 — 2024-07-03
- 2.0.2 — 2024-07-03
- 2.0.0 — 2024-07-03
- 1.4.0 — 2024-07-02
- 1.3.1 — 2024-07-01
- 1.3.0 — 2023-02-27
- 1.2.0 — 2022-12-23
- 1.1.3 — 2022-06-20
- 1.1.2 — 2022-06-20
- 1.1.1 — 2022-03-06
- 1.1.0 — 2022-03-05
- 1.0.0 — 2022-03-05

## README

<h1 align="center">
  <br>
    <img src="https://github.com/material-extensions/svg-color-linter/raw/main/logo.png" alt="logo" width="200">
  <br><br>
  SVG Color Linter
  <br>
  <br>
</h1>

<h4 align="center">Linting tool to check if SVG files only use colors of a given color palette.</h4>

## CLI Command

The tool can be executed with this command:

```
bunx svg-color-linter --config color-config.yml file1.svg file2.svg
```

It will fetch all the colors of a YAML file which must have the following structure:

```yaml
colors:
  - "#FFEBEE"
  - "#FFCDD2"
  - "#EF9A9A"
  - "#E57373"
  - "#EF5350"
  - "#F44336"
```

It also supports glob file patterns to check multiple files matching the pattern like this:

```
bunx svg-color-linter --config color-config.yml ./images/**/*.svg ./another-dir/*.svg test.svg
```

### Excluding Files

You can exclude specific files or patterns from the analysis by adding an `exclude` key in the `color-config.yml` file. The `exclude` key should contain a list of file patterns to be ignored. For example:

```yaml
colors:
  - "#FFEBEE"
  - "#FFCDD2"
  - "#EF9A9A"
  - "#E57373"
  - "#EF5350"
  - "#F44336"

exclude:
  - "icons/icon1.svg"
  - "icons/icon2.svg"
  - ...
```

## Programmatic use

The tool can be imported as module into existing JavaScript or TypeScript code. Therefor it is necessary to install it via package manager:

```
npm install svg-color-linter
```

The module can be imported like this:

```ts
import { isColorInPalette, getSuggestions } from 'svg-color-linter';

isColorInPalette('#FFFFFF', ['#EEEEEE', '#121212']);
// false

getSuggestions('#C0CA35', ['#EEEEEE', '#121212']);
// [
//   { hex: '#C0CA33', distance: 0.160467661071053 },
//   { hex: '#CDDC39', distance: 4.307076277707079 },
//   { hex: '#D4E157', distance: 5.606714639567858 },
//   { hex: '#AFB42B', distance: 5.713845679863578 },
//   { hex: '#DCE775', distance: 8.065940911169271 }
// ]
```

---
_Source: https://npm.io/package/svg-color-linter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._