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
Was this helpful?