https://github.com/fostimus/eslint-plugin-svg-jsx

Automatically get your inline SVGs ready for production in React.
https://github.com/fostimus/eslint-plugin-svg-jsx

Last synced: 22 days ago
JSON representation

Automatically get your inline SVGs ready for production in React.

• Host: GitHub
• URL: https://github.com/fostimus/eslint-plugin-svg-jsx
• Owner: fostimus
• License: mit
• Created: 2022-06-30T18:22:30.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-22T21:18:18.000Z (8 months ago)
• Last Synced: 2024-09-15T04:55:38.013Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 106 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

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

2. In your .eslintrc.js:

    1. Add `svg-jsx` to your plugins

    2. 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:

```js

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. 

```js

// invalid

// valid

```

Case #2: Colons in props. 

```js

// invalid

// valid

```

Case #3: string style attributes

```js

// invalid

// valid

```

## Contributing

Pull requests are welcome. Please checkout the [open issues](https://github.com/fostimus/eslint-plugin-svg-jsx/issues) we have if you'd like to help out. Bugfixes and related features are also welcome.