Is there any way to use Ionicon Web Components with Remix SPA mode on Vite? #8810

nikodunk · 2024-02-20T21:03:24Z

nikodunk
Feb 20, 2024

Hi! We're thinking of migrating from a plain Vite app to first a Remix SPA, then a full Remix app. Our one blocker is that we've still got https://ionic.io/ionicons/usage web components all over our app, which are SVGs loaded with a script like so in index.html:

<script
    type="module"
    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js">
</script>
<script
    nomodule
    src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js">
</script>

which fetches the icons when below template is encountered in code like so:
<ion-icon name='chevron-back-outline' />

Moving the above script to root.jsx does not load it as far as I can tell, nor are any network requests made for the ionicons on the actual pages.

If the script in the head is the issue, will we have to switch to something less "plain web" like react ionicons or will this not work with remix even on SPA mode due to server rendering issues? We're on @remix-run/react": "^2.7.0" if that makes any difference!

Thank you!!

Answered by nikodunk

Feb 20, 2024

Got it working! External Scripts from remix-utils is the answer, I believe. In your app/root.jsx

import { Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
import { ExternalScripts } from 'remix-utils/external-scripts'

export const handle = {
  scripts: () => [
    { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.js' }
  ]
}

export default function App () {
  return (
    <html lang='en'>
        <head></head>
       ...
        <body>
           <Outlet />
           ...
           <ExternalScripts />
         </body>
    </html>
  )
}

Then you can use <ion-icon /> normally in code.

View full answer

nikodunk · 2024-02-20T22:07:58Z

nikodunk
Feb 20, 2024
Author

Got it working! External Scripts from remix-utils is the answer, I believe. In your app/root.jsx

import { Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
import { ExternalScripts } from 'remix-utils/external-scripts'

export const handle = {
  scripts: () => [
    { src: 'https://unpkg.com/[email protected]/dist/ionicons/ionicons.js' }
  ]
}

export default function App () {
  return (
    <html lang='en'>
        <head></head>
       ...
        <body>
           <Outlet />
           ...
           <ExternalScripts />
         </body>
    </html>
  )
}

Then you can use <ion-icon /> normally in code.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Is there any way to use Ionicon Web Components with Remix SPA mode on Vite? #8810

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Is there any way to use Ionicon Web Components with Remix SPA mode on Vite? #8810

Uh oh!

Uh oh!

nikodunk Feb 20, 2024

Replies: 1 comment

Uh oh!

Uh oh!

nikodunk Feb 20, 2024 Author

nikodunk
Feb 20, 2024

nikodunk
Feb 20, 2024
Author