如何在内网上使用 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 });

这个 link 也可能有帮助。

如何在内网上使用 Fluent UI 图标

How to use Fluent UI Icons on an intranet

reactjs

uikit

icons

fluentui-react