Warning using with Next.js server side rendering about iconify HOT 6 CLOSED

Its probably something else in your code. Error message is clear: missing </span> element. Neither Iconify library renders span elements.

from iconify.

That is because the client site transform to <svg> tag. does not match <span> tag on server.

from iconify.

Yes, that's normal behaviour for this library. However @iconify/react generates SVG, so you can use that instead.

from iconify.

Thanks @cyberalien
But @iconify/react what way to render only on the client? Example

<Icon icon={faceWithMonocle} ssr={false} />

Because If uses many svg icon thenPageSpeed Insights warning DOM elements.

from iconify.

Looks like Next.js is making rendering on client impossible.

You can try this: use @iconify/iconify, but instead of adding span, wrap it in some other element and use dangerouslySetInnerHTML to insert span:

function Icon(props) {
  const html = '<span class="iconify" data-icon="' + props.icon + '"></span>';
 return <span dangerouslySetInnerHTML={{__html: html}} />;
}

Not sure if it will work, but it might. This way it will have 2 span elements, Next.js should only watch for one that Iconify won't modify and inner one will be changed to svg by Iconify.

from iconify.

@cyberalien thanks, might react-no-ssr would be help me.

from iconify.