如何在 vue 的故事书中显示材料设计图标

Posted 2023-02-19

【中文标题】如何在 vue 的故事书中显示材料设计图标

【英文标题】：How to show material design icons in storybook for vue

【发布时间】：2020-11-10 10:18:04

【问题描述】：

我正在使用 vue 和 vuetify 的故事书。

它很有用，但看不到材料设计图标v-icons。

如何在故事书中显示图标？

【参考方案1】：

如果问题是 Storybook 没有下载材料设计图标样式表，您可以将 preview-head.html 文件放在您的 .storybook 目录中。

一旦我这样做了，我就可以放入以下内容，然后我的素材图标就正确显示了。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

我是从 Storybook 文档的这个页面的“添加 Webfonts”部分得到的。 https://storybook.js.org/docs/react/configure/styling-and-css

*注意 - 我使用的是 Svelte，而不是 Vue，并且文档在技术上适用于 React。我不确定 Vue 是否有不同的项目结构。由于 React 和 Svelte 都是一样的，我认为它对所有 Storybook 项目都是通用的。