使用Fabric UI的Outlook web加载项中的文件类型（mime类型）问题

我正在使用Fabric UI框架开发Outlook Web加载项。Im使用Fabric UI核心，不使用React或AngularJS。我在获取文件类型（MIME类型）图标时遇到了一个问题。我在Fabric UI中在线找到的关于文件类型的任何引用都是针对React框架的

有没有一种方法可以在Fabric UI中使用纯Javascript获取文件类型而无需响应？我找到了以下文件类型可用的链接：

我可以编写一个简单的JS代码，在上面的URL中传递适当的文件扩展名，以加载所需的文件类型图标。例如：

扩展名]\u 16x1.svg

这样获取文件类型正确吗？这些URL是获取文件类型图标的可靠来源吗

---

非常感谢您的帮助。

@uifabric/file type icons

是包含一组文件类型图标映射的当前软件包。它包括一个注册助手和一些函数，用于导出图像映射的给定扩展

@uifabric/styleing

包含通用图标助手

getIcon

，用于从任何图标注册中提取注册图标

我在这里使用vanilla JS制作了一个codesandbox示例：

…以及React中更清晰、更具互动性的示例：

重要的步骤是：

调用

initializeFileTypeIcons

在图标注册表中注册文件类型图标

调用

getIconProps（{extension:'docx'，size:16}）

获取要映射到的图标名的详细信息

调用

getIcon

获取图标的详细信息，您可以在其中访问url，您可以将url插入原始HTML或使用您选择的框架来呈现img

请注意，样式设计包对React具有对等依赖性，因此我需要添加它，但这里不使用它。这是我们当然可以改进的

---

希望这有帮助。

谢谢大卫。您的代码是使用React编写的。但我没有使用React。我正在用纯JS编写代码。我使用的是不需要React或AngularJS的织物芯。你能告诉我，如果不使用React就可以得到图标吗？我已经制作了一个单独的codesandbox，它使用vanilla js实现上述功能。请注意，虽然我确实需要添加React作为对等依赖项以使Parcel满意，但它并没有被使用。上面的解决方案已编辑以包含此内容。当我在visual studio 2019 asp.net核心web项目中运行上述index.js代码时，我得到以下错误：类型错误：错误解析模块说明符：@uifabric/文件类型图标david，如何在visual studio 2019中获取依赖项：uifabric/文件类型图标？是否仅通过npm安装？我有一段时间没有使用asp.net core了。我相信您应该能够在那个环境中安装npm；只是不确定我能帮你解决环境问题。我们发现：