vue.js - 在 Vue 中使用 Material Design 图标

Question

我想在我的 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:

Answer 1

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

我们提供了一个Vue 图标组件来简化此操作。

这是一个单文件组件示例：

<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>