Question

我正在尝试在我的 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 等实际字体。任何帮助将不胜感激。

Answer 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> 的东西。

如何在 react-styleguidist 中包含材质图标

1 个答案: