Skip to content

Diagnostic issue: html-no-self-closing for path within an inline svg. #448

@kirley

Description

@kirley

Line: 95
Diagnostic: Self-closing syntax <path /> is not allowed in HTML. Use <path></path> instead.
Severity: Error

File Content:

                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M12 10v4" />
                  <path d="M10 13l4 -2" />
                  <path d="M10 11l4 2" />
                  <path d="M5 10v4" />
                  <path d="M3 13l4 -2" />
                  <path d="M3 11l4 2" />
                  <path d="M19 10v4" />
                  <path d="M17 13l4 -2" />
                  <path d="M17 11l4 2" />
                </svg>  ```

**Problematic Line:**
```erb
                    <path d="M12 10v4" />

Environment:

  • VS Code Extension Version: 0.6.0

  • VS Code Version: 1.103.2

  • Platform: darwin

  • Node Version: v22.17.0

    Herb Settings:

{
"linter.enabled": true,
"trace.server": "verbose"
}

Additional Context:
It is my understanding that the self closing path tag <path .... /> is the preferred sytax for inline SVG. If you check out the code at heroicons.com you'll see this is what they use.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions