{"id":19958,"library":"eslint-plugin-svg-jsx","title":"eslint-plugin-svg-jsx","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"git@github.com:fostimus/eslint-plugin-svg-jsx","tags":["javascript","eslint","eslintplugin","eslint-plugin","react","svg","props","camelCase","camel case"],"install":[{"cmd":"npm install eslint-plugin-svg-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-svg-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-svg-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires ESLint >=8 to function as an ESLint plugin.","package":"eslint","optional":false}],"imports":[{"note":"ESLint plugins are specified by name only; the plugin is resolved from node_modules.","wrong":"// Wrong: using require in plugins array\nplugins: [require('eslint-plugin-svg-jsx')]","symbol":"eslint-plugin-svg-jsx","correct":"// In .eslintrc.js:\nplugins: ['svg-jsx']"},{"note":"Rule name uses hyphens; set severity as 'error' or 'warn' string.","wrong":"rules: { 'svg-jsx/camel-case-dash': 2 } // numeric severity is deprecated","symbol":"camel-case-dash","correct":"rules: { 'svg-jsx/camel-case-dash': 'error' }"},{"note":"Rule has no options; passing extra config may cause ESLint errors.","wrong":"rules: { 'svg-jsx/camel-case-colon': ['error', { something: true }] } // no options available","symbol":"camel-case-colon","correct":"rules: { 'svg-jsx/camel-case-colon': 'error' }"},{"note":"Prevents string style attributes; use JSX style object instead.","wrong":"rules: { 'svg-jsx/no-style-string': 1 } // numeric severity is deprecated","symbol":"no-style-string","correct":"rules: { 'svg-jsx/no-style-string': 'error' }"}],"quickstart":{"code":"// .eslintrc.js\nmodule.exports = {\n  plugins: ['svg-jsx'],\n  rules: {\n    'svg-jsx/camel-case-dash': 'error',\n    'svg-jsx/camel-case-colon': 'error',\n    'svg-jsx/no-style-string': 'error',\n  },\n};","lang":"javascript","description":"Configures ESLint with all three SVG JSX rules enforcing camelCase props."},"warnings":[{"fix":"Use string severity: 'error' or 'warn' instead of numbers.","message":"Using numeric severity in ESLint rules is deprecated (e.g., 'error' as 2).","severity":"deprecated","affected_versions":">=8"},{"fix":"Upgrade ESLint to >=8.","message":"The plugin does not support ESLint <8; older ESLint will not load the plugin.","severity":"gotcha","affected_versions":"<1.0.0"},{"fix":"Ensure colon is only used for namespace prefixes like xmlns:xlink; use camelCase instead.","message":"Rule 'svg-jsx/camel-case-colon' only flags colon in props, not other punctuation.","severity":"gotcha","affected_versions":"all"},{"fix":"Only apply this rule to SVG files or components if needed; configure with overrides.","message":"The 'no-style-string' rule will report all string style attributes, including valid inline styles in HTML (non-SVG).","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev eslint-plugin-svg-jsx` or `yarn add -D eslint-plugin-svg-jsx`.","cause":"Plugin not installed or missing from node_modules.","error":"ESLint couldn't find the plugin \"eslint-plugin-svg-jsx\"."},{"fix":"Upgrade ESLint to >=8 or use numeric severity (2) for older ESLint.","cause":"Using string 'error' with an old version of ESLint (<7) that requires numeric severity.","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\"')."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}