Vue-cli 3 - Material 设计图标安装

Question

如何安装 vue-material-design-icons in my Vue CLI 3 项目？我一直在尝试使用它，但没有任何好结果，而且我找不到任何关于它的教程。

Answer 1

用法

可在 https://materialdesignicons.com/ 找到可用图标的完整列表。首次加载时，站点可能需要几秒钟才能在页面底部显示图标预览列表。将鼠标悬停在所需的图标上，并记下工具提示顶部显示的图标名称。或者，单击图标预览以在弹出窗口中显示图标详细信息。您可以使用以下格式在 Vue 组件中导入图标：

import FooIcon from 'vue-material-design-icons/__ICON_NAME__.vue'

例如，此屏幕截图显示了名为 auto-fix:

的图标的工具提示

在您的 Vue 组件中，您可以像这样导入图标：

import AutoFixIcon from 'vue-material-design-icons/auto-fix.vue'

并将其声明为本地组件：

export default {
  name: 'my-component',
  components: {
    AutoFixIcon
  }
}

然后在您的组件模板中使用它：

<template>
  <AutoFixIcon/>
</template>

教程

创建一个新的 vue-cli 项目（例如，命名为 vue-md-icons-demo），并在出现提示时选择 default 设置：
```
vue create vue-md-icons-demo
```
CD进入新建的项目目录：
```
cd vue-md-icons-demo
```
从 NPM 安装 vue-material-design-icons 包：
```
npm i -S vue-material-design-icons
```

在 src/main.js 中，导入图标的样式：

  import Vue from 'vue'
  import App from './App.vue'
+ import 'vue-material-design-icons/styles.css'

在src/App.vue（或者在你的组件文件中），导入需要使用的图标（参见上面的用法），并声明它作为本地组件。在这种情况下，我们将导入名为 air-conditioner:

的图标

  <script>
  import HelloWorld from './components/HelloWorld.vue'
+ import AirConditionerIcon from 'vue-material-design-icons/air-conditioner.vue'

  export default {
    name: 'app',
    components: {
-     HelloWorld
+     HelloWorld,
+     AirConditionerIcon
    }
  }

在src/App.vue中声明模板中的图标元素（即本例中的<AirConditionerIcon/>）：
```
<template>
  <AirConditionerIcon/>
</template>
```

demo

Answer 2

官方material设计图标指南： https://dev.materialdesignicons.com/getting-started/vue

安装

npm install @mdi/js @jamescoyle/vue-icon

导入您的项目

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

组件示例：

<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-cli 3 - Material 设计图标安装

Vue-cli 3 - Material design icons installation

vue.js

vuejs2

vue-cli

vue-cli-3

用法

教程