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

Posted

技术标签:

【中文标题】Vue-cli 3 - 材料设计图标安装【英文标题】:Vue-cli 3 - Material design icons installation 【发布时间】:2019-01-18 10:00:02 【问题描述】:

如何在我的Vue CLI 3 项目中安装vue-material-design-icons?我一直在尝试使用它没有任何好的结果,我找不到任何关于它的教程。

【问题讨论】:

【参考方案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 中,在模板中声明图标元素(即在本例中为&lt;AirConditionerIcon/&gt;):

    <template>
      <AirConditionerIcon/>
    </template>
    

demo

【讨论】:

【参考方案2】:

官方材料设计图标指南: 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 - 材料设计图标安装的主要内容,如果未能解决你的问题,请参考以下文章

显示完全错误图标的材料设计图标

材料设计图标颜色

如何在 vue 的故事书中显示材料设计图标

将材料设计图标导入 android 项目

材料设计图标未显示在浏览器中

包含谷歌材料设计图标的语法是正确的?