1

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

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

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

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

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

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

4

1 回答 1

0

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

在我的 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 |材质+图标+圆形|材质+图标+锐利

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

于 2021-04-29T19:01:56.123 回答