摩纳哥编辑器缺少图标

【问题标题】：Monaco Editor missing icons摩纳哥编辑器缺少图标
【发布时间】：2023-02-23 04:49:23
【问题描述】：

Moncao Editor (0.20) 中的图标丢失了，它们在我的实例中只显示为空白方块。为了让它们出现在我的 Vue (2.x) 应用程序中，我缺少什么？

在 Devtools > Elements 中，“使用正则表达式”按钮的 :before 伪类的 css 看起来像这样。

在 webpack.config.js (4.x) 中，我在 modules.rules 下有这个

 { // monaco
    test: /\.ttf$/,
    use: ['file-loader']
  }

编辑：在 Devtools > Network 选项卡中，在 Monaco Editor's website 的操场上，我可以看到 codicon.ttf 是从 microsoft.github.io/node-modules/... 获取的，但在我的应用程序中没有 .ttf 文件拿来了。似乎这就是问题的根源。初始化代码编辑器时如何获取它？

【问题讨论】：

标签： css vue.js webpack icons monaco-editor

【解决方案1】：

我认为图书馆使用@fortawesome。安装这个，因为你有 webpack v4

"@fortawesome/fontawesome-free": "^5.15.3",

你必须在顶级应用程序文件中导入它

import "@fortawesome/fontawesome-free/css/all.min.css";

在 webpack.config.js 中

{
        test: /.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },

还

npm i svg-url-loader

【讨论】：