[Fix] no-unknown-property: allow fill prop on <symbol>

jsx-eslint · Mar 20, 2023 · 492c34c · 492c34c
1 parent f56851b
commit 492c34c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,7 +15,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-curly-brace-presence`]: handle single and only expression template literals ([#3538][] @taozhou-glean)
 * [`no-unknown-property`]: allow `onLoad` on `source` (@ljharb)
 * [`jsx-first-prop-new-line`]: ensure autofix preserves generics in component name ([#3546][] @ljharb)
+* [`no-unknown-property`]: allow `fill` prop on `<symbol>` ([#3555][] @stefanprobst)
 
+[#3555]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3555
 [#3548]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3548
 [#3546]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3546
 [#3538]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3538

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -49,6 +49,7 @@ const ATTRIBUTE_TAGS_MAP = {
     'polyline',
     'rect',
     'svg',
+    'symbol',
     'text',
     'textPath',
     'tref',

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -58,6 +58,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<svg key="lock" viewBox="box" fill={10} d="d" stroke={1} strokeWidth={2} strokeLinecap={3} strokeLinejoin={4} transform="something" clipRule="else" x1={5} x2="6" y1="7" y2="8"></svg>' },
     { code: '<g fill="#7B82A0" fillRule="evenodd"></g>' },
     { code: '<mask fill="#7B82A0"></mask>' },
+    { code: '<symbol fill="#7B82A0"></symbol>' },
     { code: '<meta property="og:type" content="website" />' },
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
     { code: '<video playsInline />' },
@@ -472,7 +473,7 @@ ruleTester.run('no-unknown-property', rule, {
           data: {
             name: 'fill',
             tagName: 'div',
-            allowedTags: 'altGlyph, circle, ellipse, g, line, marker, mask, path, polygon, polyline, rect, svg, text, textPath, tref, tspan, use, animate, animateColor, animateMotion, animateTransform, set',
+            allowedTags: 'altGlyph, circle, ellipse, g, line, marker, mask, path, polygon, polyline, rect, svg, symbol, text, textPath, tref, tspan, use, animate, animateColor, animateMotion, animateTransform, set',
           },
         },
       ],