在 Vue 中使用 Material 设计图标

Using Material Design icons with Vue

我想在我的 vue 项目中使用 MaterialDesignIcons (https://materialdesignicons.com/)。在我的项目中使用这些图标的正确方法是什么?我尝试了以下但出现错误....

纱线添加@mdi/font

然后在我的 vue 文件中

<template>
    ...
    <mdiLock /> 
    ...
</template>

import { mdiLock } from '@mdi/font';

export default {
  components: {
    mdiLock,
  },
}

但是我收到错误 This dependency was not found:

你不能像那样从字体包中提取图标。您可能想要使用 @mdi/js.

我们提供了一个 Vue icon component 让这变得简单。

这里是单个文件组件的例子:

<template>
  <svg-icon type="mdi" :path="path"></svg-icon>
</template>


<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

export default {
    name: "my-cool-component",

    components: {
        SvgIcon
    },

    data() {
        return {
            path: mdiAccount,
        }
    }
}
</script>