Vue-cli 3 - 材料设计图标安装

Question

这里没有代码可供提供,因为这只是一个简单的问题.谁能告诉我如何在我的vue-cli 3项目中实现vue-material-design-icons包？我一直试图这样做没有任何好结果,我找不到任何关于它的教程.

提前致谢.

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>
   

演示