eslint-plugin-code-style 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -7,6 +7,88 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.11.0] - 2026-02-03
+
+**New Rule: svg-component-icon-naming + Multiple Component Props Fixes**
+
+**Version Range:** v1.10.1 → v1.11.0
+
+### Added
+
+**New Rules (1)**
+
+- **`svg-component-icon-naming`** - Enforce SVG components to have 'Icon' suffix and vice versa
+  - Components returning only `<svg>` must end with "Icon" suffix (e.g., `SuccessIcon`)
+  - Components with "Icon" suffix must return an `<svg>` element
+  - Works with arrow functions and function declarations
+
+### Fixed
+
+- **`component-props-inline-type`** - Single prop trailing comma now correctly removed (was not detecting comma in member range)
+- **`component-props-inline-type`** - Closing `})` now properly placed on its own line for multiple type props (was missing for non-intersection types)
+- **`function-params-per-line`** - Type annotations no longer removed when collapsing params (was losing entire type annotation)
+- **`function-params-per-line`** - Default values preserved for shorthand props (e.g., `className = ""` no longer becomes `className`)
+- **`function-params-per-line`** - Type annotation complexity now considered (2+ type props = complex, prevents incorrect collapsing)
+
+### Stats
+
+- Total Rules: 73 (was 72)
+- Auto-fixable: 65 rules
+- Report-only: 8 rules
+
+**Full Changelog:** [v1.10.1...v1.11.0](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.1...v1.11.0)
+
+---
+
+## [1.10.3] - 2026-02-03
+
+**Bug Fixes: className template literals and trailing comma removal**
+
+**Version Range:** v1.10.2 → v1.10.3
+
+### Fixed
+
+- **`no-hardcoded-strings`** - Skip template literals inside className/style attributes (Tailwind classes in template literals)
+- **`component-props-inline-type`** - Auto-fix to REMOVE trailing comma for single property (not just skip adding it)
+
+**Full Changelog:** [v1.10.2...v1.10.3](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.2...v1.10.3)
+
+---
+
+## [1.10.2] - 2026-02-03
+
+**Bug Fixes: component-props-inline-type and no-hardcoded-strings**
+
+**Version Range:** v1.10.1 → v1.10.2
+
+### Fixed
+
+- **`component-props-inline-type`** - Don't require trailing comma for single property in inline type definitions
+- **`no-hardcoded-strings`** - Skip 40+ SVG attributes (strokeLinecap, strokeLinejoin, filter, result, in, in2, mode, colorInterpolationFilters, etc.)
+- **`no-hardcoded-strings`** - Skip SVG standard attribute values (round, butt, square, miter, bevel, none, normal, sRGB, userSpaceOnUse, etc.)
+- **`no-hardcoded-strings`** - Skip URL references (url(#...)) and scientific notation numbers
+- **`no-hardcoded-strings`** - Skip CSS property values (cursor: pointer, display: flex, position: absolute, etc.)
+- **`no-hardcoded-strings`** - Skip SVG filter result identifiers (BackgroundImageFix, SourceGraphic, etc.)
+
+**Full Changelog:** [v1.10.1...v1.10.2](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.1...v1.10.2)
+
+---
+
+## [1.10.1] - 2026-02-03
+
+**Bug Fix: logical-expression-multiline rule improvements**
+
+**Version Range:** v1.10.0 → v1.10.1
+
+### Fixed
+
+- **`logical-expression-multiline`** - Add collapse to single line for simple expressions (≤3 operands)
+- **`logical-expression-multiline`** - Skip collapsing when any operand is multiline (e.g., JSX elements)
+
+**Full Changelog:** [v1.10.0...v1.10.1](https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.0...v1.10.1)
+
+---
+
 ## [1.10.0] - 2026-02-03
 
 **New Rule: logical-expression-multiline + Enhanced no-hardcoded-strings**
@@ -1379,7 +1461,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
-[1.10.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.0...v1.10.0
+[1.11.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.3...v1.11.0
+[1.10.3]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.2...v1.10.3
+[1.10.2]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.1...v1.10.2
+[1.10.1]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.10.0...v1.10.1
+[1.10.0]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.7...v1.10.0
 [1.9.7]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.6...v1.9.7
 [1.9.6]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.5...v1.9.6
 [1.9.5]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.9.4...v1.9.5

package/README.md

@@ -19,7 +19,7 @@
 
 **A powerful ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects.**
 
-*71 rules (64 auto-fixable) to keep your codebase clean and consistent*
+*73 rules (65 auto-fixable) to keep your codebase clean and consistent*
 
 </div>
 
@@ -27,7 +27,7 @@
 
 ## 🎯 Why This Plugin?
 
-This plugin provides **71 custom rules** (64 auto-fixable) for code formatting. Built for **ESLint v9 flat configs**.
+This plugin provides **73 custom rules** (65 auto-fixable) for code formatting. Built for **ESLint v9 flat configs**.
 
 > **Note:** ESLint [deprecated 79 formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/) in v8.53.0. Our recommended configs use `@stylistic/eslint-plugin` as the replacement for these deprecated rules.
 
@@ -36,7 +36,7 @@ This plugin provides **71 custom rules** (64 auto-fixable) for code formatting.
 - **Works alongside existing tools** — Complements ESLint's built-in rules and packages like eslint-plugin-react, eslint-plugin-import, etc
 - **Self-sufficient rules** — Each rule handles complete formatting independently
 - **Consistency at scale** — Reduces code-style differences between team members by enforcing uniform formatting across your projects
-- **Highly automated** — 64 of 71 rules support auto-fix with `eslint --fix`
+- **Highly automated** — 65 of 73 rules support auto-fix with `eslint --fix`
 
 When combined with ESLint's native rules and other popular plugins, this package helps create a complete code style solution that keeps your codebase clean and consistent.
 
@@ -97,7 +97,7 @@ We provide **ready-to-use ESLint flat configuration files** that combine `eslint
 <td width="50%">
 
 ### 🔧 Auto-Fixable Rules
-**64 rules** support automatic fixing with `eslint --fix`. 6 rules are report-only (require manual changes).
+**65 rules** support automatic fixing with `eslint --fix`. 6 rules are report-only (require manual changes).
 
 </td>
 <td width="50%">
@@ -199,6 +199,7 @@ rules: {
     "code-style/comment-format": "error",
     "code-style/component-props-destructure": "error",
     "code-style/component-props-inline-type": "error",
+    "code-style/svg-component-icon-naming": "error",
     "code-style/curried-arrow-same-line": "error",
     "code-style/empty-line-after-block": "error",
     "code-style/enum-format": "error",
@@ -261,7 +262,7 @@ rules: {
 
 ## 📖 Rules Categories
 
-> **71 rules total** — 64 with auto-fix 🔧, 7 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
+> **73 rules total** — 65 with auto-fix 🔧, 8 report-only. See detailed examples in [Rules Reference](#-rules-reference) below.
 >
 > **Legend:** 🔧 Auto-fixable with `eslint --fix` • ⚙️ Customizable options
 
@@ -288,6 +289,7 @@ rules: {
 | **Component Rules** | |
 | `component-props-destructure` | Component props must be destructured `({ prop })` not received as `(props)` 🔧 |
 | `component-props-inline-type` | Inline type annotation `} : {` with matching props, proper spacing, commas, no interface reference 🔧 |
+| `svg-component-icon-naming` | SVG components must end with "Icon" suffix; "Icon" suffix components must return SVG |
 | **Class Rules** | |
 | `class-method-definition-format` | Consistent spacing in class/method definitions: space before `{`, no space before `(` 🔧 |
 | `class-naming-convention` | Class declarations must end with "Class" suffix (e.g., `ApiServiceClass`) 🔧 |
@@ -2965,6 +2967,44 @@ export const Card = ({ a, b } : { a: string, b: string }) => (
 );
 ```
 
+---
+
+### `svg-component-icon-naming`
+
+**What it does:** Enforces naming conventions for SVG icon components:
+- Components that return only an SVG element must have a name ending with "Icon"
+- Components with "Icon" suffix must return an SVG element
+
+**Why use it:** Consistent naming makes it immediately clear which components render icons, improving code readability and making icon components easier to find in large codebases.
+
+```tsx
+// ✅ Good — returns SVG and ends with "Icon"
+export const SuccessIcon = ({ className = "" }: { className?: string }) => (
+    <svg className={className}>
+        <path d="M9 12l2 2 4-4" />
+    </svg>
+);
+
+// ✅ Good — returns non-SVG and doesn't end with "Icon"
+export const Button = ({ children }: { children: React.ReactNode }) => (
+    <button>{children}</button>
+);
+
+// ❌ Bad — returns SVG but doesn't end with "Icon"
+export const Success = ({ className = "" }: { className?: string }) => (
+    <svg className={className}>
+        <path d="M9 12l2 2 4-4" />
+    </svg>
+);
+// Error: Component "Success" returns an SVG element and should end with "Icon" suffix
+
+// ❌ Bad — ends with "Icon" but doesn't return SVG
+export const ButtonIcon = ({ children }: { children: React.ReactNode }) => (
+    <button>{children}</button>
+);
+// Error: Component "ButtonIcon" has "Icon" suffix but doesn't return an SVG element
+```
+
 <br />
 
 ## 🔷 TypeScript Rules
@@ -3541,7 +3581,7 @@ const UseAuth = () => {};          // hooks should be camelCase
 
 ## 🔧 Auto-fixing
 
-64 of 71 rules support auto-fixing. Run ESLint with the `--fix` flag:
+65 of 73 rules support auto-fixing. Run ESLint with the `--fix` flag:
 
 ```bash
 # Fix all files in src directory

package/index.d.ts

@@ -19,6 +19,7 @@ export type RuleNames =
     | "code-style/component-props-destructure"
     | "code-style/react-code-order"
     | "code-style/component-props-inline-type"
+    | "code-style/svg-component-icon-naming"
     | "code-style/curried-arrow-same-line"
     | "code-style/empty-line-after-block"
     | "code-style/enum-type-enforcement"
@@ -113,6 +114,7 @@ interface PluginRules {
     "component-props-destructure": Rule.RuleModule;
     "react-code-order": Rule.RuleModule;
     "component-props-inline-type": Rule.RuleModule;
+    "svg-component-icon-naming": Rule.RuleModule;
     "curried-arrow-same-line": Rule.RuleModule;
     "empty-line-after-block": Rule.RuleModule;
     "enum-type-enforcement": Rule.RuleModule;

package/index.js

@@ -2540,10 +2540,22 @@ const functionParamsPerLine = {
                     // Check if shorthand (key and value are the same identifier)
                     const isShorthand = prop.shorthand || (prop.value && prop.value.type === "Identifier" && prop.value.name === prop.key.name);
 
-                    return isShorthand ? key : `${key}: ${value}`;
+                    if (isShorthand) {
+                        // For shorthand with default value, use the value (includes default)
+                        return prop.value && prop.value.type === "AssignmentPattern" ? value : key;
+                    }
+
+                    return `${key}: ${value}`;
                 });
 
-                return `{ ${props.join(", ")} }`;
+                let result = `{ ${props.join(", ")} }`;
+
+                // Preserve type annotation if present
+                if (param.typeAnnotation) {
+                    result += sourceCode.getText(param.typeAnnotation);
+                }
+
+                return result;
             }
 
             if (param.type === "ArrayPattern") {
@@ -2582,6 +2594,24 @@ const functionParamsPerLine = {
                 // Check if this pattern has 2+ properties
                 if (pattern.properties.length >= 2) return true;
 
+                // Check if type annotation has 2+ members (TSTypeLiteral)
+                if (pattern.typeAnnotation && pattern.typeAnnotation.typeAnnotation) {
+                    const typeAnnotation = pattern.typeAnnotation.typeAnnotation;
+
+                    if (typeAnnotation.type === "TSTypeLiteral" && typeAnnotation.members.length >= 2) {
+                        return true;
+                    }
+
+                    // Also check intersection types for TSTypeLiteral with 2+ members
+                    if (typeAnnotation.type === "TSIntersectionType") {
+                        const typeLiteral = typeAnnotation.types.find((t) => t.type === "TSTypeLiteral");
+
+                        if (typeLiteral && typeLiteral.members.length >= 2) {
+                            return true;
+                        }
+                    }
+                }
+
                 // Check nested patterns
                 for (const prop of pattern.properties) {
                     if (prop.type === "Property" && prop.value) {
@@ -5304,9 +5334,35 @@ const logicalExpressionMultiline = {
             // Collect all operands
             const operands = collectOperandsHandler(node);
 
-            // If operands count is within threshold, skip
-            if (operands.length <= maxOperands) return;
+            // Case 1: Simple expression (≤maxOperands) that's multiline → collapse to single line
+            if (operands.length <= maxOperands) {
+                if (isMultilineHandler(node)) {
+                    // Skip if any operand is itself multiline (e.g., JSX elements, function calls)
+                    const hasMultilineOperand = operands.some((op) => op.loc.start.line !== op.loc.end.line);
+
+                    if (hasMultilineOperand) return;
 
+                    context.report({
+                        fix(fixer) {
+                            // Build single line: operand1 op operand2 op operand3
+                            const parts = [sourceCode.getText(operands[0])];
+
+                            for (let i = 1; i < operands.length; i++) {
+                                const operator = getOperatorHandler(operands[i - 1], operands[i]);
+                                parts.push(` ${operator} ${sourceCode.getText(operands[i])}`);
+                            }
+
+                            return fixer.replaceText(node, parts.join(""));
+                        },
+                        message: `Logical expression with ${operands.length} operands should be on a single line (max for multiline: ${maxOperands})`,
+                        node,
+                    });
+                }
+
+                return;
+            }
+
+            // Case 2: Complex expression (>maxOperands) → enforce multiline
             // Check if already properly multiline
             if (isMultilineHandler(node)) {
                 // Check if each operand is on its own line
@@ -5361,7 +5417,7 @@ const logicalExpressionMultiline = {
         };
     },
     meta: {
-        docs: { description: "Enforce multiline formatting for logical expressions with more than maxOperands" },
+        docs: { description: "Enforce single line for ≤maxOperands, multiline for >maxOperands logical expressions" },
         fixable: "code",
         schema: [
             {
@@ -14069,6 +14125,10 @@ const noHardcodedStrings = {
             "cellSpacing",
             "charSet",
             "className",
+            "clipPath", // SVG
+            "clipRule", // SVG
+            "colorInterpolation", // SVG
+            "colorInterpolationFilters", // SVG
             "classNames",
             "colSpan",
             "contentEditable",
@@ -14090,7 +14150,12 @@ const noHardcodedStrings = {
             "encType",
             "enterKeyHint",
             "fill", // SVG
+            "fillOpacity", // SVG
             "fillRule", // SVG
+            "filter", // SVG filter reference
+            "filterUnits", // SVG
+            "floodColor", // SVG
+            "floodOpacity", // SVG
             "for",
             "form",
             "formAction",
@@ -14107,8 +14172,12 @@ const noHardcodedStrings = {
             "hrefLang",
             "htmlFor",
             "httpEquiv",
+            "gradientTransform", // SVG
+            "gradientUnits", // SVG
             "icon",
             "id",
+            "in", // SVG filter input
+            "in2", // SVG filter input
             "imagesizes",
             "imagesrcset",
             "inputMode",
@@ -14130,7 +14199,13 @@ const noHardcodedStrings = {
             "low",
             "marginHeight",
             "marginWidth",
+            "markerEnd", // SVG
+            "markerMid", // SVG
+            "markerStart", // SVG
+            "markerUnits", // SVG
+            "mask", // SVG
             "max",
+            "mode", // SVG blend mode
             "maxLength",
             "media",
             "mediaGroup",
@@ -14146,7 +14221,11 @@ const noHardcodedStrings = {
             "open",
             "optimum",
             "pattern",
+            "patternContentUnits", // SVG
+            "patternTransform", // SVG
+            "patternUnits", // SVG
             "ping",
+            "preserveAspectRatio", // SVG
             "playsInline",
             "poster",
             "preload",
@@ -14155,7 +14234,10 @@ const noHardcodedStrings = {
             "readOnly",
             "referrerPolicy",
             "rel",
+            "repeatCount", // SVG
+            "repeatDur", // SVG
             "required",
+            "result", // SVG filter result
             "reversed",
             "role",
             "rowSpan",
@@ -14177,23 +14259,86 @@ const noHardcodedStrings = {
             "srcSet",
             "start",
             "step",
+            "spreadMethod", // SVG
+            "stdDeviation", // SVG filter blur
+            "stopColor", // SVG gradient
+            "stopOpacity", // SVG gradient
             "stroke", // SVG
+            "strokeDasharray", // SVG
+            "strokeDashoffset", // SVG
+            "strokeLinecap", // SVG
+            "strokeLinejoin", // SVG
+            "strokeMiterlimit", // SVG
+            "strokeOpacity", // SVG
             "strokeWidth", // SVG
             "style",
             "summary",
             "tabIndex",
             "target",
             "testId",
+            "textAnchor", // SVG
+            "textDecoration", // SVG
             "transform", // SVG
             "translate",
             "type",
+            "vectorEffect", // SVG
             "useMap",
             "value",
             "viewBox", // SVG
             "width",
             "wmode",
             "wrap",
+            "x", // SVG coordinate
+            "x1", // SVG line coordinate
+            "x2", // SVG line coordinate
             "xmlns",
+            "y", // SVG coordinate
+            "y1", // SVG line coordinate
+            "y2", // SVG line coordinate
+            // SVG filter primitive attributes
+            "baseFrequency",
+            "numOctaves",
+            "seed",
+            "stitchTiles",
+            "operator",
+            "k1",
+            "k2",
+            "k3",
+            "k4",
+            "surfaceScale",
+            "diffuseConstant",
+            "specularConstant",
+            "specularExponent",
+            "kernelMatrix",
+            "order",
+            "targetX",
+            "targetY",
+            "edgeMode",
+            "kernelUnitLength",
+            "bias",
+            "divisor",
+            "preserveAlpha",
+            "radius",
+            "azimuth",
+            "elevation",
+            "limitingConeAngle",
+            "pointsAtX",
+            "pointsAtY",
+            "pointsAtZ",
+            // SVG shape attributes
+            "cx", // circle/ellipse center x
+            "cy", // circle/ellipse center y
+            "r", // circle radius
+            "rx", // ellipse radius x
+            "ry", // ellipse radius y
+            "points", // polygon/polyline points
+            "pathLength",
+            "offset", // gradient offset
+            "dx", // text offset
+            "dy", // text offset
+            "rotate", // text rotate
+            "lengthAdjust",
+            "textLength",
         ];
 
         const ignoreAttributes = options.ignoreAttributes
@@ -14207,9 +14352,27 @@ const noHardcodedStrings = {
             /^.$/,
             // CSS units and values
             /^-?\d+(\.\d+)?(px|em|rem|%|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc|deg|rad|turn|s|ms|fr)?$/,
+            // Scientific notation numbers (common in SVG coordinates)
+            /^-?\d+(\.\d+)?e[+-]?\d+$/i,
             // Colors (hex, rgb, hsl)
             /^#[0-9a-fA-F]{3,8}$/,
             /^(rgb|rgba|hsl|hsla)\(.+\)$/,
+            // URL references (SVG filters, clips, etc.)
+            /^url\(#?.+\)$/,
+            // SVG standard attribute values
+            /^(round|butt|square|miter|bevel|none|normal|evenodd|nonzero|sRGB|linearRGB|userSpaceOnUse|objectBoundingBox|pad|reflect|repeat|auto|inherit|currentColor|meet|slice|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax|stitch|noStitch|duplicate|wrap|arithmetic|atop|in|out|over|xor|dilate|erode|matrix|saturate|hueRotate|luminanceToAlpha|discrete|linear|gamma|table|identity|SourceGraphic|SourceAlpha|BackgroundImage|BackgroundAlpha|FillPaint|StrokePaint)$/,
+            // SVG filter result/internal identifiers (patterns like effect1_foregroundBlur, filter0_f_21_211, BackgroundImageFix)
+            /^[a-zA-Z]+\d*[_a-zA-Z0-9]*(_[a-zA-Z0-9]+)+$/,
+            // Color names (CSS named colors used in SVG)
+            /^(white|black|red|green|blue|yellow|orange|purple|pink|brown|gray|grey|cyan|magenta|transparent)$/i,
+            // CSS cursor values
+            /^(auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|grab|grabbing|all-scroll|col-resize|row-resize|n-resize|e-resize|s-resize|w-resize|ne-resize|nw-resize|se-resize|sw-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|zoom-in|zoom-out)$/,
+            // CSS display/visibility values
+            /^(block|inline|inline-block|flex|inline-flex|grid|inline-grid|flow-root|contents|table|table-row|table-cell|list-item|none|visible|hidden|collapse)$/,
+            // CSS position values
+            /^(static|relative|absolute|fixed|sticky)$/,
+            // CSS overflow values
+            /^(visible|hidden|scroll|auto|clip)$/,
             // URLs and paths
             /^(https?:\/\/|\/\/|\/|\.\/|\.\.\/)/,
             // Data URLs
@@ -14766,6 +14929,18 @@ const noHardcodedStrings = {
                 // Skip if it's a reference to an imported constant
                 if (isImportedConstantHandler(expression)) return;
 
+                // Check if we're inside a JSX attribute that should be ignored (like className)
+                if (node.parent && node.parent.type === "JSXAttribute") {
+                    const attrName = node.parent.name.name
+                        || (node.parent.name.namespace && `${node.parent.name.namespace.name}:${node.parent.name.name.name}`);
+
+                    // Skip if attribute is in ignore list (className, style, etc.)
+                    if (ignoreAttributes.includes(attrName)) return;
+
+                    // Skip data-* and aria-* attributes
+                    if (attrName && (attrName.startsWith("data-") || attrName.startsWith("aria-"))) return;
+                }
+
                 // Check string literals
                 if (expression.type === "Literal" && typeof expression.value === "string") {
                     const str = expression.value;
@@ -16961,8 +17136,8 @@ const componentPropsInlineType = {
                         }
                     });
 
-                    // Check that last member has trailing comma
-                    if (members.length > 0) {
+                    // Check that last member has trailing comma (only for multiple members)
+                    if (members.length > 1) {
                         const lastMember = members[members.length - 1];
                         const lastMemberText = sourceCode.getText(lastMember);
 
@@ -16975,6 +17150,25 @@ const componentPropsInlineType = {
                         }
                     }
 
+                    // Remove trailing comma for single member on single line
+                    if (members.length === 1) {
+                        const member = members[0];
+                        const memberText = sourceCode.getText(member);
+
+                        if (memberText.trimEnd().endsWith(",")) {
+                            context.report({
+                                fix: (fixer) => {
+                                    const lastCommaIndex = memberText.lastIndexOf(",");
+                                    const absolutePos = member.range[0] + lastCommaIndex;
+
+                                    return fixer.removeRange([absolutePos, absolutePos + 1]);
+                                },
+                                message: "Single props type property should not have trailing comma",
+                                node: member,
+                            });
+                        }
+                    }
+
                     // Check for empty lines before closing brace
                     if (members.length > 0 && closeBraceToken) {
                         const lastMember = members[members.length - 1];
@@ -17110,6 +17304,22 @@ const componentPropsInlineType = {
                     }
                 }
 
+                // Check closing brace position - should be on its own line for multiple members
+                if (members.length > 1 && closeBraceToken) {
+                    const lastMember = members[members.length - 1];
+
+                    if (closeBraceToken.loc.start.line === lastMember.loc.end.line) {
+                        context.report({
+                            fix: (fixer) => fixer.replaceTextRange(
+                                [lastMember.range[1], closeBraceToken.range[0]],
+                                "\n" + baseIndent,
+                            ),
+                            message: "Closing brace must be on its own line when there are multiple properties",
+                            node: closeBraceToken,
+                        });
+                    }
+                }
+
                 // Check each member for semicolons vs commas and line formatting
                 members.forEach((member, index) => {
                     const memberText = sourceCode.getText(member);
@@ -17198,8 +17408,8 @@ const componentPropsInlineType = {
                     }
                 });
 
-                // Check that last member has trailing comma
-                if (members.length > 0) {
+                // Check that last member has trailing comma (only for multiple members)
+                if (members.length > 1) {
                     const lastMember = members[members.length - 1];
                     const lastMemberText = sourceCode.getText(lastMember);
 
@@ -17211,6 +17421,25 @@ const componentPropsInlineType = {
                         });
                     }
                 }
+
+                // Remove trailing comma for single member on single line
+                if (members.length === 1) {
+                    const member = members[0];
+                    const memberText = sourceCode.getText(member);
+
+                    if (memberText.trimEnd().endsWith(",")) {
+                        context.report({
+                            fix: (fixer) => {
+                                const lastCommaIndex = memberText.lastIndexOf(",");
+                                const absolutePos = member.range[0] + lastCommaIndex;
+
+                                return fixer.removeRange([absolutePos, absolutePos + 1]);
+                            },
+                            message: "Single props type property should not have trailing comma",
+                            node: member,
+                        });
+                    }
+                }
             }
         };
 
@@ -17305,6 +17534,140 @@ const componentPropsInlineType = {
     },
 };
 
+/**
+ * ───────────────────────────────────────────────────────────────
+ * Rule: SVG Component Icon Naming
+ * ───────────────────────────────────────────────────────────────
+ *
+ * Description:
+ *   Components that return only an SVG element must have a name
+ *   ending with "Icon". Conversely, components with "Icon" suffix
+ *   must return an SVG element.
+ *
+ * ✓ Good:
+ *   export const SuccessIcon = ({ className }: { className?: string }) => (
+ *       <svg className={className}>...</svg>
+ *   );
+ *
+ *   export const Button = ({ children }: { children: ReactNode }) => (
+ *       <button>{children}</button>
+ *   );
+ *
+ * ✗ Bad:
+ *   // Returns SVG but doesn't end with "Icon"
+ *   export const Success = ({ className }: { className?: string }) => (
+ *       <svg className={className}>...</svg>
+ *   );
+ *
+ *   // Ends with "Icon" but doesn't return SVG
+ *   export const ButtonIcon = ({ children }: { children: ReactNode }) => (
+ *       <button>{children}</button>
+ *   );
+ */
+const svgComponentIconNaming = {
+    create(context) {
+        // Get the component name from node
+        const getComponentNameHandler = (node) => {
+            // Arrow function: const Name = () => ...
+            if (node.parent && node.parent.type === "VariableDeclarator" && node.parent.id && node.parent.id.type === "Identifier") {
+                return node.parent.id.name;
+            }
+
+            // Function declaration: function Name() { ... }
+            if (node.id && node.id.type === "Identifier") {
+                return node.id.name;
+            }
+
+            return null;
+        };
+
+        // Check if component name starts with uppercase (React component convention)
+        const isReactComponentNameHandler = (name) => name && /^[A-Z]/.test(name);
+
+        // Check if name ends with "Icon"
+        const hasIconSuffixHandler = (name) => name && name.endsWith("Icon");
+
+        // Check if the return value is purely an SVG element
+        const returnsSvgOnlyHandler = (node) => {
+            const body = node.body;
+
+            if (!body) return false;
+
+            // Arrow function with expression body: () => <svg>...</svg>
+            if (body.type === "JSXElement") {
+                return body.openingElement && body.openingElement.name && body.openingElement.name.name === "svg";
+            }
+
+            // Arrow function with parenthesized expression: () => (<svg>...</svg>)
+            if (body.type === "ParenthesizedExpression" && body.expression) {
+                if (body.expression.type === "JSXElement") {
+                    return body.expression.openingElement && body.expression.openingElement.name && body.expression.openingElement.name.name === "svg";
+                }
+            }
+
+            // Block body with return statement: () => { return <svg>...</svg>; }
+            if (body.type === "BlockStatement") {
+                // Find all return statements
+                const returnStatements = body.body.filter((stmt) => stmt.type === "ReturnStatement" && stmt.argument);
+
+                // Should have exactly one return statement for a simple SVG component
+                if (returnStatements.length === 1) {
+                    const returnArg = returnStatements[0].argument;
+
+                    if (returnArg.type === "JSXElement") {
+                        return returnArg.openingElement && returnArg.openingElement.name && returnArg.openingElement.name.name === "svg";
+                    }
+
+                    // Parenthesized: return (<svg>...</svg>);
+                    if (returnArg.type === "ParenthesizedExpression" && returnArg.expression && returnArg.expression.type === "JSXElement") {
+                        return returnArg.expression.openingElement && returnArg.expression.openingElement.name && returnArg.expression.openingElement.name.name === "svg";
+                    }
+                }
+            }
+
+            return false;
+        };
+
+        const checkFunctionHandler = (node) => {
+            const componentName = getComponentNameHandler(node);
+
+            // Only check React components (PascalCase)
+            if (!isReactComponentNameHandler(componentName)) return;
+
+            const returnsSvg = returnsSvgOnlyHandler(node);
+            const hasIconSuffix = hasIconSuffixHandler(componentName);
+
+            // Case 1: Returns SVG but doesn't end with "Icon"
+            if (returnsSvg && !hasIconSuffix) {
+                context.report({
+                    message: `Component "${componentName}" returns an SVG element and should end with "Icon" suffix (e.g., "${componentName}Icon")`,
+                    node: node.parent && node.parent.type === "VariableDeclarator" ? node.parent.id : node.id || node,
+                });
+            }
+
+            // Case 2: Ends with "Icon" but doesn't return SVG
+            if (hasIconSuffix && !returnsSvg) {
+                context.report({
+                    message: `Component "${componentName}" has "Icon" suffix but doesn't return an SVG element. Either rename it or make it return an SVG.`,
+                    node: node.parent && node.parent.type === "VariableDeclarator" ? node.parent.id : node.id || node,
+                });
+            }
+        };
+
+        return {
+            ArrowFunctionExpression: checkFunctionHandler,
+            FunctionDeclaration: checkFunctionHandler,
+            FunctionExpression: checkFunctionHandler,
+        };
+    },
+    meta: {
+        docs: { description: "Enforce SVG components to have 'Icon' suffix and vice versa" },
+        fixable: null,
+        schema: [],
+        type: "suggestion",
+    },
+};
+
 /**
  * ───────────────────────────────────────────────────────────────
  * Rule: No Inline Type Definitions
@@ -20082,6 +20445,7 @@ export default {
         // Component rules
         "component-props-destructure": componentPropsDestructure,
         "component-props-inline-type": componentPropsInlineType,
+        "svg-component-icon-naming": svgComponentIconNaming,
 
         // React rules
         "react-code-order": reactCodeOrder,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-code-style",
-    "version": "1.10.0",
+    "version": "1.11.0",
     "description": "A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects",
     "main": "index.js",
     "types": "index.d.ts",