eslint-plugin-svg-jsx

1.3.0 verified Sat Apr 25 auth: no javascript

ESLint plugin that enforces camelCased React props in JSX, specifically targeting SVG attributes with dashes or colons, and warns against string style attributes. Current stable version is 1.3.0. Released as needed, with low release cadence. Differentiator: specialized lint rules for SVG-in-JSX common conventions where React requires camelCase but SVG native attributes use kebab-case or colon format.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-svg-jsx". ↓

cause Plugin not installed or missing from node_modules.

fix

Run npm install --save-dev eslint-plugin-svg-jsx or yarn add -D eslint-plugin-svg-jsx.

error Configuration for rule "svg-jsx/camel-case-dash" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"error"'). ↓

cause Using string 'error' with an old version of ESLint (<7) that requires numeric severity.

fix

Upgrade ESLint to >=8 or use numeric severity (2) for older ESLint.

Warnings

deprecated Using numeric severity in ESLint rules is deprecated (e.g., 'error' as 2). ↓

fix Use string severity: 'error' or 'warn' instead of numbers.

gotcha The plugin does not support ESLint <8; older ESLint will not load the plugin. ↓

fix Upgrade ESLint to >=8.

gotcha Rule 'svg-jsx/camel-case-colon' only flags colon in props, not other punctuation. ↓

fix Ensure colon is only used for namespace prefixes like xmlns:xlink; use camelCase instead.

gotcha The 'no-style-string' rule will report all string style attributes, including valid inline styles in HTML (non-SVG). ↓

fix Only apply this rule to SVG files or components if needed; configure with overrides.

Install

npm install eslint-plugin-svg-jsx

yarn add eslint-plugin-svg-jsx

pnpm add eslint-plugin-svg-jsx

Imports

eslint-plugin-svg-jsx

wrong

// Wrong: using require in plugins array
plugins: [require('eslint-plugin-svg-jsx')]

correct

// In .eslintrc.js:
plugins: ['svg-jsx']

ESLint plugins are specified by name only; the plugin is resolved from node_modules.

camel-case-dash

wrong

rules: { 'svg-jsx/camel-case-dash': 2 } // numeric severity is deprecated

correct

rules: { 'svg-jsx/camel-case-dash': 'error' }

Rule name uses hyphens; set severity as 'error' or 'warn' string.

camel-case-colon

wrong

rules: { 'svg-jsx/camel-case-colon': ['error', { something: true }] } // no options available

correct

rules: { 'svg-jsx/camel-case-colon': 'error' }

Rule has no options; passing extra config may cause ESLint errors.

no-style-string

wrong

rules: { 'svg-jsx/no-style-string': 1 } // numeric severity is deprecated

correct

rules: { 'svg-jsx/no-style-string': 'error' }

Prevents string style attributes; use JSX style object instead.

Quickstart

Configures ESLint with all three SVG JSX rules enforcing camelCase props.

// .eslintrc.js
module.exports = {
  plugins: ['svg-jsx'],
  rules: {
    'svg-jsx/camel-case-dash': 'error',
    'svg-jsx/camel-case-colon': 'error',
    'svg-jsx/no-style-string': 'error',
  },
};