IMaterialDesign 图标

• 概述

  • 在 CSS 中按需引入（推荐）
  • 直接使用 Vue 组件（不推荐）

• 示例

• API

  • Props/Attrs
  • Slots

所有图标设计源自 Material Design Icons。为了减少在 CSS 里使用icon-font属性进行尺寸和位置调整，本组件中的所有图标资源在原始图标的基础上进行了适当变更。

使用方法

在 CSS 中按需引入（推荐）

在业务组件或项目公共组件<i-icon>的 CSS 中添加以下代码，按需引入单个图标：

.icon[name="delete"]::before {
    icon-font: url('i-material-design.vue/assets/filled/delete.svg');
}

点击下文中的示例可以复制路径代码。

直接使用 Vue 组件（不推荐）

这种方式会引入全部图标，不推荐使用。

1. 注册全局包

import IMaterialDesign from 'i-material-design.vue';

Vue.component('i-material-design', IMaterialDesign);

2. 然后按照如下方式使用

<div><i-material-design name="delete"></i-material-design> 删除</div>
<div><i-material-design name="delete" theme="outlined"></i-material-design> 轮廓主题</div>
<div><i-material-design name="delete" theme="rounded"></i-material-design> 圆角主题</div>
<div><i-material-design name="delete" theme="sharp"></i-material-design> 尖锐主题</div>

一个项目中推荐只使用一种图标主题。

双击下文中的示例可以复制组件代码。

示例