Eslint-plugin-svgo NPM

eslint-plugin-svgo

Optimize SVG files with SVGO using ESLint.

Supported

SVGO v4.0.0-rc.1+
ESLint v9.5.0+

Install

npm install eslint-plugin-svgo -D

yarn add eslint-plugin-svgo -D

pnpm add eslint-plugin-svgo -D

Basic Usage

// eslint.config.js

import { defineConfig } from 'eslint/config'
import pluginSVGO from 'eslint-plugin-svgo'

export default defineConfig([
  // ...other flat configs
  pluginSVGO.configs.recommended,
])

Advanced Usage

// eslint.config.js

import { defineConfig } from 'eslint/config'
import { parserPlain, plugin as pluginSVGO } from 'eslint-plugin-svgo'

export default defineConfig([
  // ...other flat configs
  {
    // plugin name, optional
    name: 'svgo',

    // only check svg files
    files: ['**/*.svg'],

    // ignore matched svg files
    ignores: ['icons/foo.svg', 'images/**/*.svg'],

    // use svgo plugins
    plugins: {
      svgo: pluginSVGO,
    },

    // use parser
    languageOptions: {
      parser: parserPlain,
    },

    rules: {
      'svgo/svgo': [
        'error',
        {
          // svgo config
          floatPrecision: 2,
          js2svg: {
            pretty: true,
          },
          plugins: [
            // plugin preset-default
            'preset-default',

            // overrides preset-default
            {
              name: 'preset-default',
              params: {
                overrides: {
                  // disable plugin
                  cleanupAttrs: false,

                  // custom plugin params
                  cleanupIds: {
                    minify: false,
                  },
                },
              },
            },

            // plugin name
            'cleanupIds',

            // plugin with params
            {
              name: 'cleanupIds',
              params: {
                minify: false,
              },
            },
          ],
        },
      ],
    },
  },
])

Intergrated

VSCode

Enable xml support.

{
  "eslint.validate": ["xml"]
}

Prettier

You should ignores **/*.svg for eslint-plugin-prettier config or add it to .prettierignore

Rules

`svgo/svgo`

Use svgo to optimize SVG files.

Options

Default options:

{
  "js2svg": {
    "indent": 2,
    "pretty": true
  },
  "plugins": ["preset-default"]
}

svgoConfig

type: boolean | string
default: undefined

Use an external config file, e.g: svgo.config.mjs.

Set to true, svgo will auto load config.

Set to path/to/your/svgo.config to custom config file path.

!NOTE If you use svgoConfig, any other rule options will be ignored unless no config file is found.

path

type: string
default: context.filename

Can be used by plugins, for example prefixids.

multipass

type: boolean
default: false

Pass over SVGs multiple times to ensure all optimizations are applied.

floatPrecision

type: number
default: 3

Precision of floating point numbers. Will be passed to each plugin that supports this param.

datauri

type: 'base64' | 'enc' | 'unenc'
default: undefined

Output as Data URI string.

js2svg

type: object
default: { indent: 2, pretty: true }

Options for rendering optimized SVG from AST. Check svgo/lib/types.d.ts for details.

Options bellow are not supported:

regEntities
regValEntities
encodeEntity

plugins

type: array
default: ['preset-default']

Plugins configuration. Check Plugins | SVGO Documentation for details.

Limitation

For ESLint use json schema compatible syntax as its rule options, so function, regexp types are not supported in rule svgo/svgo options. See bellow:

js2svg
- regEntities - function
- regValEntities - function
- encodeEntity - function
plugins
- prefixIds
  - prefix - function, but type boolean and string is supported
- addClassesToSVGElement
  - className - function, but type string is supported
  - classNames - function, but type string is supported
- convertColors
  - currentColor - regexp, but type boolean and string is supported
- removeComments
  - preservePatterns - regexp, but type boolean and string is supported
any custom plugins
- fn - function