Vuetify VIcon 没有出现在 Storybook 中

Question

我正在使用 Vuetify 开发一个 Vue 应用程序，并使用 Storybook 记录组件。

我写的故事很好，所有组件似乎都出现在 Storybook 中（就像我的自定义组件和 Vuetify 组件一样）。 VIcon 除外。

我有一个使用 Vuetify 的 VIcon 的组件，但我无法显示图标（在实际应用中没有问题） .

设置：

src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  }
});

.storybook/vuetify_storybook.js

import Vue from 'vue';
import Vuetify from 'vuetify'; // loads all components
import 'vuetify/dist/vuetify.min.css'; // all the css for components
import config from '@/plugins/vuetify'; // basic config with theme

Vue.use(Vuetify);

export default new Vuetify(config);

.storybook/preview.js

import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';

addDecorator(() => ({
  vuetify,
  template: `
    <v-app>
      <story />
    </v-app>
    `,
}));

.storybook/main.js

const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.js',
    '../src/**/*.stories.js'
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-storysource'
  ],

  webpackFinal: async (config, { configType }) => {

    config.resolve.extensions.push('.vue', '.css', '.less', '.scss', '.sass', '.html')

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.sass$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: "@import '@/styles/variables.scss';"
          }
        }
      ],
    });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });

    // Return the altered config
    return config;
  },
};

CustomVIcon.stories.js

import { withKnobs } from '@storybook/addon-knobs'

export default {
  title: 'Display that icon',
  decorators: [withKnobs]
}

export const displayIcon = () => {
  return {
    template: `<v-icon>mdi-alert</v-icon>`
  }
}

如果我添加的文本不是 mdi 图标（如 <v-icon>notmditext</v-icon>，则显示文本 - 但只要我添加 -（破折号/减号）到字符串，它不会显示出来。

我可以在控制台中看到图标的 HTML（嗯，它的一部分），只有 ::before 部分丢失（应该是实际图标）。因此，当我检查 Storybook 页面（图标应该在的位置）时，设置了样式、添加了类等。

• 已经尝试添加https://www.npmjs.com/package/storybook-addon-jsx（实际情况下组件是用JSX渲染的），没有任何改变（没有v-icon）
• 已经尝试在故事中添加其他组件（例如 VCard），并且它们出现了（其他故事也很完美）
• Vue 是 2.6.12，Vuetify 2.3.10，@storybook/vue 6.0.21 - 非常新鲜
• 还尝试从vuetify/lib 导入组件（而不仅仅是.storybook/vuetify_storybook.js 中的vuetify) 并在本地注册它们（在preview.js 和故事文件中 - 没有变化）

Answer 1

好的，只是需要另一种看法：

• 删除了指向 Material design 图标 CDN 的链接：

// remove this from public/index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

• 将包从@mdi/js更改为@mdi/font

npm remove @mdi/js
npm install @mdi/font -D

• 在两个地方导入了相应的 CSS：

// add this to src/main.js & .storybook/vuetify_storybook.js
import '@mdi/font/css/materialdesignicons.css';

• 更改了 Vuetify 配置

// in src/plugins/vuetify.js
icons: {
  // iconfont: 'mdiSvg', // change this
  iconfont: 'mdi', // to this
},

瞧！ VIcon 出现。

所以，问题在于我认为一切都已正确设置，但事实并非如此：应用程序中的图标来自 CDN（没有查看 网络选项卡），当我从index.html 中删除 CDN 链接时，它立即变得明显。

更多关于在 Vuetify 中设置图标：Install Material Design Icons