(Outdated) Working guide: How to load icons in Next JS 14+ (App)

[royeradames]

See #2047

Depending on how you’re loading Shoelace, you may need to copy icon assets and/or set the base path so Shoelace knows where to load them from. Otherwise, icons may not appear and you’ll see 404 Not Found errors in the dev console. source

What doesn't work:

CDN Installation (Easiest)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>

source

We can use Meta from next js to add this meta tags but our IDE will give us errors when we try to use the sl tags.

Updating the asset path in your page.tsx to the npm package path

root layout page

// layout.jsx
import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';

setBasePath('@/node_modules/@shoelace-style/shoelace/dist/assets/icons');
//alternative path doesn't work.
// setBasePath('@/node_modules/@shoelace-style/shoelace/dist/assets');

Updating the asset path in your page.tsx to the cdn

// layout.jsx
import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/');

The (ugly) solution:

Coping and pasting the assets into next js static public folder.

At this point, why not just get all the components code into our repo. All elements live here https://github.com/shoelace-style/shoelace/tree/next/src so we can just copy and paste them. Iron out some things, and have them live natively in our repos. Same spirit of https://ui.shadcn.com/ but more manual. We can make this a nicer set up with npx at a later time.

[claviska]

We can use Meta from next js to add this meta tags but our IDE will give us errors when we try to use the sl tags.

While a popular option, I wouldn't suggest using the CDN with Next.js for this reason. Next is strongly typed and generates a bundle, so you might as well import Shoelace components that way instead of the CDN. (You can also use the React wrappers for a more idiomatic experience.)

At this point, why not just get all the components code into our repo. All elements live here https://github.com/shoelace-style/shoelace/tree/next/src so we can just copy and paste them.

I wouldn't copy/paste the source files. We ship a dist folder with everything you need to use Shoelace in bundler environment, including types. This will save you time, as you don't have to worry about our build requirements and your bundler doesn't have to run TypeScript et al over the Shoelace source.

[claviska]

Closing as this is marked as "outdated" now.