Vue-CLI 3-材质设计图标安装

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. 从NPM安装vue-material-design-icons软件包：

   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

Answer 2

官方 Material Design 图标指南： 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>