unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
4.11k stars 145 forks source link

Broken in SvelteKit: `Failed to resolve import "~icons/mdi/account-box"` #163

Closed didier closed 2 years ago

didier commented 2 years ago

Following the install guide, I haven't been able to get this to work. Using the mdi set as an example here.

Reproduction: https://stackblitz.com/edit/unplugin-issue?file=src/routes/index.svelte

Failed to resolve import "~icons/mdi/account-box" from "src/routes/index.svelte". Does the file exist?
2  |  import { create_ssr_component, validate_component } from "svelte/internal";
3  |  
4  |  import Icon from '~icons/mdi/account-box';
   |                    ^
5  |  
6  |  const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
Error: Failed to resolve import "~icons/mdi/account-box" from "src/routes/index.svelte". Does the file exist?
    at formatError (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
    at TransformContext.error (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
    at normalizeUrl (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26)
    at async TransformContext.transform (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57)
    at async Object.transform (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
    at async doTransform (/home/projects/unplugin-issue/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29)

Svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import Icons from 'unplugin-icons/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),

     // Override http methods in the Todo forms
     methodOverride: {
       allowed: ['PATCH', 'DELETE']
     }
   },
   vite: {
     plugins: [
       Icons({ compiler: 'svelte' })
    ]
  }
}

export default config;

I should note I have gotten this plugin to work previously, seems that it breaks now.

userquin commented 2 years ago

@didier vite option should go inside kit option

EDIT: add also unplugin-icons as dev dependency

userquin commented 2 years ago

https://stackblitz.com/edit/unplugin-issue-lw1cyu?file=svelte.config.js

didier commented 2 years ago

@userquin I must be blind. Can't believe I missed that. Thanks!