NO_INLINE_SVG

Prevent the use of `svg` tags inline.
Table of Contents

Conformance is available on Enterprise plans

This rule is available from version 1.3.0.

Preventing the use of <svg></svg> inline improves the health of your codebase at the page level. Using inlined svg tags in excess can cause hydration issues, negatively impact the performance of both the browser and the server rendering.

By default, this rule is disabled. To enable it, refer to customizing Conformance.

If you hit this issue, you can resolve it by using SVGs as an <Image> component. Don't forget to enable dangerouslyAllowSVG in your application's next.config.js file, and use the unoptimized component prop.

.app/page.js
import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/logo.svg"
      width={100}
      height={100}
      alt="Logo of ACME"
      unoptimized
    />
  )
}
Last updated on July 23, 2024