How to use SVG icon sets with SSR?

[jrson83]

Hey,
today I tried using Feather Icons with v23. I first tried react-feather but they didn't get rendered at all.
Then I tried ts-react-feather-icons, same result.
At least I tried feather-icons with @types/feather-icons. I first added the code to server.tsx from the v23 template, inside the let html.

const feather = require('feather-icons')
...
{feather.icons.home.toSvg()}
...

It worked and the icon was rendered. After I tried to use it on my sidebar component, with and without hydration. The result was HTML code:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>

At least I tried the new dangerouslySetInnerHTML, but it still rendered the svg code :

<dangerouslySetInnerHTML>{feather.icons.home.toSvg()}</dangerouslySetInnerHTML>

Am I doing something wrong? Or does it not support SVG?
It would be awesome if it's possible to use react-feather cause it's possible to just import the icons you need.

[yandeu]

Try

<p dangerouslySetInnerHTML={{ __html: feather.icons.home.toSvg() }}></p>

[jrson83]

Try

<p dangerouslySetInnerHTML={{ __html: feather.icons.home.toSvg() }}></p>

Thanks but the behaviour is the same, it outputs:

<dangerouslysetinnerhtml>&lt;svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"&gt;&lt;path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"&gt;&lt;/path&gt;&lt;polyline points="9 22 9 12 15 12 15 22"&gt;&lt;/polyline&gt;&lt;/svg&gt;</dangerouslysetinnerhtml>

[yandeu]

server- or client-side? I tried it server-side and it worked.

[jrson83]

server- or client-side? I tried it server-side and it worked.

Yeah that's what I said in the first post, server side it worked, even without the dangerouslySetInnerHTML. But the sidebar is a client side component and inserted in MainLayout.tsx. Is there a way to get it working there? Or do you mean I should render the Sidebar server side with renderSSR?

<div id="root">
  <Navbar path={path} />
  <Sidebar path={path} />
  <div id="content">
    <main class="site-content">
      <div class="container pt-5">
        <div class="row m-0">
          <div class="col-md-12 p-3">{props.children}</div>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</div>

[yandeu]

I just tested the following client-side, and it worked as well.

const feather = require('feather-icons')

Nano.hydrate(<p dangerouslySetInnerHTML={{ __html: feather.icons.home.toSvg() }}></p>, document.getElementById('root'))

[jrson83]

I just tested the following client-side, and it worked as well.

const feather = require('feather-icons')

Nano.hydrate(<p dangerouslySetInnerHTML={{ __html: feather.icons.home.toSvg() }}></p>, document.getElementById('root'))

Sorry man I don't get it. Now it is working even inside the sidebar without hydrating it. I must have made something wrong before. Thanks!