NO_INLINE_SVG

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.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/logo.svg"
      width={100}
      height={100}
      alt="Logo of ACME"
      unoptimized
    />
  )
}