Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How do I use shoelace.style icons in svelte?

$
0
0

I can use e.g. the sl-switch tag by following the shoelace.style docs (https://shoelace.style/components/switch):

<script>    import '@shoelace-style/shoelace/dist/themes/light.css';    import '@shoelace-style/shoelace/dist/components/switch/switch.js';<script><sl-switch size="small" checked></sl-switch>

To use the icons I'm supposed to set the base path (e.g. https://shoelace.style/getting-started/installation#bundling). My attempt:

<script>    import '@shoelace-style/shoelace/dist/themes/light.css';    import '@shoelace-style/shoelace/dist/components/icon/icon.js';    import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';    setBasePath('node_modules/@shoelace-style/shoelace/dist');</script><sl-icon name="android2"></sl-icon>

I'm just starting out with svelte (and frontend frameworks in general) and I've obviously missed a step. The error I'm getting is:

SvelteKitError: Not found: /assets/icons/android2.svg    at resolve (C:/srv/svelte/yoda5/node_modules/@sveltejs/kit/src/runtime/server/respond.js:494:13)    at resolve (C:/srv/svelte/yoda5/node_modules/@sveltejs/kit/src/runtime/server/respond.js:294:5)    at #options.hooks.handle (c:/srv/svelte/yoda5/node_modules/@sveltejs/kit/src/runtime/server/index.js:71:56)    at Module.respond (C:/srv/svelte/yoda5/node_modules/@sveltejs/kit/src/runtime/server/respond.js:291:40)    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {  status: 404,  text: 'Not Found'}

I've added the rollup.config.js file (https://github.com/shoelace-style/rollup-example/blob/master/rollup.config.js):

import path from 'path';import commonjs from '@rollup/plugin-commonjs';import copy from 'rollup-plugin-copy';import css from 'rollup-plugin-css-only'import resolve from '@rollup/plugin-node-resolve';export default {  input: 'src/index.js',  output: [{ dir: path.resolve(__dirname, 'dist'), format: 'es' }],  plugins: [    resolve(),    commonjs(),    // Bundle styles into dist/bundle.css    css({      output: 'bundle.css'    }),    // Copy Shoelace assets to dist/shoelace    copy({      copyOnce: true,      targets: [        {          src: path.resolve(__dirname, 'node_modules/@shoelace-style/shoelace/dist/assets'),          dest: path.resolve(__dirname, 'dist/shoelace')        }      ]    })  ]};

but it doesn't seem to be run on either npm run dev or npm run build..?

I'm using svelte5 if that matters.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>