Question

按照此处的文档进行操作： https://next.vuetifyjs.com/en/customization/icons 我完全按照说明设置了项目。预期：看到一个<svg>标签。实际：我看到一个<i>标记（这会导致IE上的某些设置出现问题）这是复制品的链接： https://codesandbox.io/embed/dialog-vuetify-bhs76

Answer 1

您应从vuetify site安装正确的图标库
然后将其导入到vuetify插件文件夹中

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

最后，应该使用组件上的图标

    <template>
      <div>
          <v-icon>{{mdiMenu}}</v-icon>
      </div>
    </template>

    <script>
    import { mdiMenu } from '@mdi/js'; 
    export default {
      data() {
        return {
            mdiMenu
        };
      }
    };
    </script>

您可以在此material design site

上找到图标

Answer 2

这就是我一直在做的方式。如果需要，还可以设置图标的自定义名称-如果决定更改使用的图标，这将非常有用：

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import {
  mdiDelete
} from '@mdi/js';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
    values: {
      mdiDelete,
      // or give it a custom name:
      delete: mdiDelete,
    }
  },
});

然后在您的v-icon组件中：

<v-icon>$mdiDelete</v-icon>
<v-icon>$delete</v-icon>

如何获取显示“ mdiSvg”图标的提示？

2 个答案: