eslint-plugin-svg

Rules for consistent, readable and valid SVG files.

Caution

Status: Work In Progress. Not ready for use.

Install

npm install eslint-plugin-svg -D

yarn add eslint-plugin-svg -D

pnpm add eslint-plugin-svg -D

Usage

Config in ESLint config files:

import { defineConfig } from 'eslint/config'
import pluginSVG from 'eslint-plugin-svg'

export default defineConfig([
  // Other configs...
  ...pluginSVG.configs.recommended,
  // Optional extra layers
  ...pluginSVG.configs.security,
  ...pluginSVG.configs.a11y,
])

🍎 For advanced usaged, please check Advanced Usage

Rules

📦 Config presets enabled in.
✅ recommended preset.
🔒 strict preset.
🛡️ security preset.
♿ a11y preset.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

Name	Description	✅	🔒	🛡️	♿	🔧	💡
no-empty-title	Disallow empty title element	✅	✅		✅
no-empty-desc	Disallow empty desc element	✅	✅		✅
no-empty-text	Disallow empty text element	✅	✅		✅
no-empty-container	Disallow empty container element		✅
no-empty-groups	Disallow empty g element		✅
no-base64-data-url	Disallow base64 data URLs in attributes			✅
no-inline-styles	Disallow inline style attribute		✅
no-event-handlers	Disallow inline event handlers		✅	✅
no-script-tags	Disallow script elements	✅	✅	✅
require-viewbox	Require viewBox on svg elements	✅	✅
no-deprecated	Disallow deprecated elements	✅	✅
no-doctype	Disallow doctype	✅	✅			✅
no-duplicate-ids	Disallow duplicate id attributes	✅	✅
no-elements	Disallow elements by name
no-comments	Disallow comments in SVG files
no-invalid-role	Disallow invalid value of role attribute	✅	✅		✅
no-discouraged-role	Disallow discouraged role value in SVG				✅
no-unsafe-href	Disallow unsafe href and xlink:href URLs			✅
require-accessible-name	Require an accessible name for key SVGs				✅
no-unknown-elements	Disallow non-standard SVG elements	✅	✅
prefer-current-color	Prefer currentColor over hardcoded colors

License

MIT License © 2024-PRESENT ntnyq