如何在 Intranet 上使用 Fluent UI 图标

Question

我使用 Fluent UI 套件制作了一个 React 项目。

我有这样的代码：

import { initializeIcons } from '@fluentui/font-icons-mdl2';

initializeIcons(undefined, { disableWarnings: true });

它在我的计算机上运行良好，但该项目部署在 Intranet 上，因此图标不会显示在用户的计算机上，我注意到有对这样的图标的请求：

https://spoprod-a.akamaihd.net/files/fabric/assets/icons/fabric-icons-1-4d521695.woff

我想自行托管此我的项目上的图标。

我怎么能那样做呢？

感谢您的帮助。

Answer 1

我在项目中使用这种方法。主要思想是使用 CopyWebpackPlugin 将图标从 node_modules/@ Fluentui/font-icons-mdl2/fonts 复制到特定文件夹：

const CopyWebpackPlugin = require('copy-webpack-plugin')
...
module.exports = {
  ...
  plugins: [
    new CopyWebpackPlugin([{ from: 'node_modules/@fluentui/font-icons-mdl2/fonts', to: 'fabric-font' }]),
  ]
}

更改图标目标：

import { initializeIcons } from '@fluentui/font-icons-mdl2';

initializeIcons('/fabric-font/', { disableWarnings: true });

此 链接也可能有帮助。