如何在 react-styleguidist 中包含 Material Icons
Posted
技术标签:
【中文标题】如何在 react-styleguidist 中包含 Material Icons【英文标题】：How to include Material Icons in react-styleguidist 【发布时间】：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 等实际字体。任何帮助将不胜感激。
【问题讨论】：
【参考方案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 中包含 Material Icons的主要内容，如果未能解决你的问题，请参考以下文章
如何在 SwiftUI 中包含和调用 BSImagePicker
如何在 ConfigurationSection 中包含简单集合