eslint-plugin-svg-jsx's Introduction

eslint-plugin-svg-jsx

Enforce camelCased props instead of dashed props.

NPM package: https://www.npmjs.com/package/eslint-plugin-svg-jsx

Add to your project

Add the dependency: yarn add -D eslint-plugin-svg-jsx or npm install --save-dev eslint-plugin-svg-jsx

In your .eslintrc.js:

Add svg-jsx to your plugins
Add the svg-jsx rules:

'svg-jsx/camel-case-dash': 'error',
'svg-jsx/camel-case-colon': 'error',
'svg-jsx/no-style-string': 'error',

Final .eslintrc.js should look something like:

module.exports = {
  parser: "@babel/eslint-parser",
  extends: ["standard", "standard-jsx", "plugin:prettier/recommended"],
  plugins: ["no-only-tests", "prettier", "svg-jsx"],
  rules: {
    "svg-jsx/camel-case-dash": "error",
    "svg-jsx/camel-case-colon": "error",
    "svg-jsx/no-style-string": "error",
  },
}

Code examples

Case #1: Dashes in props.

// invalid
<MyComponent margin-left={30} />

// valid
<MyComponent marginLeft={30} />

Case #2: Colons in props.

// invalid
<svg
    width="546"
    height="382"
    viewBox="0 0 546 382"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
/>

// valid
<svg
    width="546"
    height="382"
    viewBox="0 0 546 382"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
/>

Case #3: string style attributes

// invalid
<mask
    style="mask-type:alpha"
    maskUnits="userSpaceOnUse"
    x="408"
    y="144"
    width="90"
    height="194"
/>

// valid
<mask
    style={{ maskType: 'alpha' }}
    maskUnits="userSpaceOnUse"
    x="408"
    y="144"
    width="90"
    height="194"
/>