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