Svelte Icon提示‘has no default export’错误但运行正常，如何修复？

以下是几种可行的修复方案：

1. 切换为命名导入 #

多数Svelte Icon库采用命名导出而非默认导出，把默认导入语句改成命名导入即可：

// 原错误写法
import Icon from 'svelte-icons/fa/FaUser.svelte';

// 修改后的正确写法
import { Icon } from 'svelte-icons/fa/FaUser.svelte';

2. 手动添加类型声明（TypeScript项目适用） #

如果是TypeScript项目，大概率是库缺少完善的类型定义。在项目根目录创建src/types/svelte-icons.d.ts文件，写入以下内容：

declare module 'svelte-icons/**/*.svelte' {
  import type { ComponentType } from 'svelte';
  const Icon: ComponentType;
  export default Icon;
}

接着在tsconfig.json的include字段中添加这个类型文件的路径：

{
  "include": ["src/**/*", "src/types/**/*"]
}

3. 调整代码检查工具配置 #

如果是ESLint或TypeScript检查工具触发的提示，可针对性关闭相关规则：

• 针对ESLint，在.eslintrc.cjs中添加：

module.exports = {
  rules: {
    'import/default': 'off',
    'import/no-named-as-default': 'off'
  }
}

• 针对TypeScript，在tsconfig.json中开启允许合成默认导入：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

4. 更新Svelte Icon库 #

旧版本库可能存在类型定义不完善的问题，执行命令更新到最新版本：

npm update svelte-icons

内容的提问来源于stack exchange，提问作者flyingduck92