Registry / testing / eslint-plugin-svg-jsx

eslint-plugin-svg-jsx

library1.3.0jsnpmunverified

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.

testing

npm install eslint-plugin-svg-jsx

package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-SVG-

eslint-plugin-svg-jsx

testingjavascriptv1.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

eslint-plugin-svg-jsx

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

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

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

camel-case-dash

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

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

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

camel-case-colon

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

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

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

no-style-string

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

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

Prevents string style attributes; use JSX style object instead.

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', }, };

Debug

Known issues

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

fix

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

affects: >=8

gotchaThe plugin does not support ESLint <8; older ESLint will not load the plugin.

fix

Upgrade ESLint to >=8.

affects: <1.0.0

gotchaRule '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.

affects: all

gotchaThe '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.

affects: all

Errors

Common errors & fixes

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

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`.

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"').

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.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

eslintrequiredPeer dependency; plugin requires ESLint >=8 to function as an ESLint plugin.

Agent activity

5 hits · last 30 days

node

Amazon

Resources

packagehttps://www.npmjs.com/package/eslint-plugin-svg-jsx ↗