reactjs - 如何通过material-ui本地使用material字体和图标？

Question

运行 Material-ui 应用程序时，我无法访问 Internet，因此我想在本地安装 Material Design 图标和字体。我一直无法这样做。例如，我尝试通过以下方式使用图标:

1. 下载图标字体并将其复制到我的样式文件夹
2. 按照 Google 的建议引用我的应用程序 main.css 中的字体

3. 在我的应用程序中导入 main.css(我使用的是 webpack)

   但是，FontIcon 组件不显示图标。

在我的 main.css 中，我有:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
  local('MaterialIcons-Regular'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
  url(material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在 index.js 中我有:

import "./assets/styles/main.css";

Answer 1

根据 css-loader 的 documentation :

@import and url(...) are interpreted like require() and will be resolved by the css-loader.

所以，如果您使用 css-loader，这应该可以“开箱即用”。确保您的 CSS 加载器看起来有点像:

{ test: /\.css$/, loader: "style-loader!css-loader" }

那么..如果你已经这样做了..

由于您使用的是 webpack，因此您可以查看 webpack file-loader 。您需要将其包含在 webpack 配置中的 module 对象的 loaders 数组中。

如果没有文件加载器，请安装它:

npm install file-loader --save-dev

还有一个示例加载程序:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: 'file?name=material-design-icons/iconfont/[name].[ext]'
}

您可能需要使用 name 属性以及 CSS 中包含字体的路径。上述加载器中的名称目录是文件加载器转储文件的位置(如果已定义，通常是 webpack.config.js 中的 outpath.path)。运行 webpack 并看看它会为您提供什么。

或者..

您还可以将字体文件嵌入为 base-64 编码的 data-uri blob。为此，请安装 url-loader 并使用类似以下加载器的内容。这次您需要指定一个 mime-type，因此每个文件都需要它自己的加载器及其各自的 mime-type

{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65536&mimetype=application/font-woff&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65536&mimetype=application/font-woff2&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65536&mimetype=application/octet-stream&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65536&mimetype=application/vnd.ms-fontobject&name=material-design-icons/iconfont/[name].[ext]' }

但请注意，我为每个文件设置了 64K 的限制，因为浏览器对超过 64K 的 data-uri blob 的支持不是很好，尽管您可以删除此限制。

我个人建议尝试文件加载器方法。

如果您仍然遇到问题..

您应该能够在 CSS 中require您的文件。将此与上面的文件加载器结合使用。 require 返回资源的路径，因此可以在 CSS 属性的值中进行 require。最终看起来像这样:

@font-face {
  /* .... */ 
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff2')) format('woff2'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff')) format('woff'),
  url(require('material-design-icons/iconfont/MaterialIcons-Regular.ttf')) format('truetype');
  /* .... */
}