https://github.com/material-extensions/svg-color-linter
Linter for checking SVG color palette
https://github.com/material-extensions/svg-color-linter
color-palette colors svg
Last synced: over 1 year ago
JSON representation
Linter for checking SVG color palette
- Host: GitHub
- URL: https://github.com/material-extensions/svg-color-linter
- Owner: material-extensions
- License: mit
- Created: 2022-03-05T20:24:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-11T15:55:39.000Z (over 1 year ago)
- Last Synced: 2025-03-16T07:09:21.774Z (over 1 year ago)
- Topics: color-palette, colors, svg
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/svg-color-linter
- Size: 449 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
SVG Color Linter
Linting tool to check if SVG files only use colors of a given color palette.
## 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 }
// ]
```