如何在 react-styleguidist 中包含 Material Icons答案

【问题标题】：How to include Material Icons in react-styleguidist如何在 react-styleguidist 中包含 Material Icons
【发布时间】：2021-07-23 03:57:01
【问题描述】：

我正在尝试在我的 react-styleguidist 文档中使用 Google Material Icons。在我的 styleguide.config.js 文件中，我尝试过

module.exports = {
    template: './template.html'
}

然后将<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 添加到template.html 文件的<head> 标记中，但react-styleguidist 似乎不再识别这种格式了。

我尝试使用如下模板和主题：

template: {
    head: {
      links: [
         {
           rel: 'stylesheet',
           href: 'https://fonts.googleapis.com/css2?family=Material+Icons'
         }
       ]
    }
},
theme: {
   fontFamily: {
       base: "Material+Icons"
    }
}

这只是用文字而不是实际的图标显示图标名称。我认为这种方法仅适用于 Roboto 等实际字体。任何帮助将不胜感激。

【问题讨论】：

标签： html reactjs google-material-icons react-styleguidist

【解决方案1】：

我找到了适合我的解决方案。可能不是理想的方法，但它确实有效。

在我的 styleguide.config.js 中我添加了：

require: [
    path.join(__dirname, '/fonts/material-icons.css'),

]

在 /fonts/material-icons.css 中，我从这里粘贴了 css -
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

就是这样。现在我可以在我的任何代码文件中使用<span class="material-cions-rounded">group</span> 之类的东西。

【讨论】：