Sprites can also be put in Layouts

[vvo]

Hi there, since I wanted to have different layouts in my application, I did not want to have _document.jsx host the sprite directly and wondered if it was possible. And it seems to be working, so I am mostly curious about why the documentation states to put it in _document only? (open question).

For example, this works great:

pages/dashboard.jsx

import React from "react";
import AppLayout from "../lib/AppLayout.jsx"

export default function DashboardPage() {
  return (
    <AppLayout>
      <div dangerouslySetInnerHTML={{ __html: spriteContent }} />
      <div>Dashboard</div>
    </AppLayout>
  );
}

lib/AppLayout.jsx

import sprite from 'svg-sprite-loader/runtime/sprite.build';
const spriteContent = sprite.stringify();

export default function AppLayout({ children }) {
  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: spriteContent }} />
      {children}
    </>
  );
}

I find it nice in my usecase because it does not requires getInitialProps nor does it adds the sprite to the whole document on all pages. Just on the ones I need it.

Should we update the documentation to add this possibility? Or is it a bad idea because it could fail in some cases? Let me know :)

PS: thanks for the library!