文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在react-styleguidist中包含材质图标

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

Stack Overflow用户

提问于 2021-04-30 02:29:51

回答 1查看 66关注 0票数 1

我正在尝试在我的react-styleguidist文档中使用谷歌材料图标。在我的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

Stack Overflow用户

发布于 2021-04-30 03:01:56

我找到了一个适合我的解决方案。这可能不是最理想的方式，但它是有效的。

在我的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>这样的东西。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67323179

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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