hbuilder X版本升级后编辑 uni-app 时 uni-icons 图标不显示

在 HBuilder X 升级后，如果遇到 uni-icons 图标不显示的问题，可能是由于以下原因导致的。以下是一些常见的解决步骤：

1. 检查 uni-icons 版本

• HBuilder X 升级后，可能会对内置组件进行更新。确保你使用的 uni-icons 版本与当前的 HBuilder X 版本兼容。
• 可以在 package.json 中查看 uni-icons 的版本，并尝试更新到最新版本。

"dependencies": {
    "uni-icons": "^1.0.0"
}

运行以下命令更新依赖：

npm install uni-icons[@latest](/user/latest)

2. 检查图标引入方式

• 确保你正确引入了 uni-icons 组件。通常的引入方式如下：

<uni-icons type="home" size="30"></uni-icons>

• 如果使用的是自定义图标，确保图标的路径和名称正确。

3. 检查样式冲突

• 有时候，全局样式或其他组件的样式可能会影响 uni-icons 的显示。检查是否有样式冲突，尤其是 display、color 等属性。

.uni-icons {
    display: inline-block;
    color: #000;
}

4. 清除缓存并重新编译

• HBuilder X 在升级后可能会有缓存问题，尝试清除缓存并重新编译项目。
• 可以通过 HBuilder X 菜单中的 运行 -> 清除缓存并重新编译 来执行此操作。

5. 检查 HBuilder X 的 manifest.json 配置

• 确保 manifest.json 中的配置没有错误，尤其是与图标相关的配置。

{
    "app-plus": {
        "icons": {
            "android": {
                "36": "static/icons/android36.png",
                "48": "static/icons/android48.png"
            },
            "ios": {
                "57": "static/icons/ios57.png",
                "72": "static/icons/ios72.png"
            }
        }
    }
}

6. 检查项目依赖

• 确保项目的依赖项都已正确安装。可以尝试删除 node_modules 目录并重新安装依赖：

rm -rf node_modules
npm install