vue.js - Vue-cli 3 - Material 设计图标安装

Question

如何安装 vue-material-design-icons在我的 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>

教程

1. 创建一个新的 vue-cli项目(例如，命名为 vue-md-icons-demo )，然后选择 default出现提示时设置:

   vue create vue-md-icons-demo
   

2. CD进入新建的项目目录:

   cd vue-md-icons-demo
   

3. 安装 vue-material-design-icons来自 NPM 的包:

   npm i -S vue-material-design-icons
   

4. 在 src/main.js , 导入图标的样式:

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

5. 在 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
       }
     }
   

6. 在 src/App.vue , 在模板中声明图标元素(即本例中的 <AirConditionerIcon/>):

   <template>
     <AirConditionerIcon/>
   </template>
   

demo