[Fix] no-unknown-property: add viewBox for pattern, symbol, view

Fixes #3426.

Author: MNBuyskih

CHANGELOG.md

@@ -11,11 +11,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: allow `onLoad` on `<object>` ([#3415][] @OleksiiKachan)
 * [`no-multi-comp`]: do not detect a function property returning only null as a component ([#3412][] @ljharb)
 * [`no-unknown-property`]: allow `abbr` on `<th>` and `<td>` ([#3419][] @OleksiiKachan)
+* [`no-unknown-property`]: add `viewBox` for `pattern`, `symbol`, `view` ([#3424][] @MNBuyskih)
 
 ### Changed
 
-* [Meta] npmignore markdownlint config ([#3413][] @jorrit)
+* [meta] npmignore markdownlint config ([#3413][] @jorrit)
 
+[#3424]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3424
 [#3419]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3419
 [#3416]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3416
 [#3415]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3415

lib/rules/no-unknown-property.js

@@ -63,7 +63,7 @@ const ATTRIBUTE_TAGS_MAP = {
   imageSizes: ['link'],
   imageSrcSet: ['link'],
   property: ['meta'],
-  viewBox: ['svg', 'marker'],
+  viewBox: ['marker', 'pattern', 'svg', 'symbol', 'view'],
   as: ['link'],
   valign: ['tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'colgroup', 'col'], // deprecated, but known
   noModule: ['script'],

tests/lib/rules/no-unknown-property.js

@@ -123,6 +123,9 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
     { code: '<audio controlsList="nodownload" controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
     { code: '<marker id={markerId} viewBox="0 0 2 2" refX="1" refY="1" markerWidth="1" markerHeight="1" orient="auto" />' },
+    { code: '<pattern id="pattern" viewBox="0,0,10,10" width="10%" height="10%" />' },
+    { code: '<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2" />' },
+    { code: '<view id="one" viewBox="0 0 100 100" />' },
     {
       code: `
         <table>