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
中,在模板中声明图标元素(即在本例中为<AirConditionerIcon/>
):
<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 - 材料设计图标安装的主要内容,如果未能解决你的问题,请参考以下文章