Package Exports

i-material-design.vue

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (i-material-design.vue) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 组件（不推荐）

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

注册全局包

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

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

然后按照如下方式使用

<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>

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

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

示例

API

Props/Attrs

Prop/Attr	Type	Options	Default	Description
name	string			使用的图标名
theme	string			使用的图标主题

Slots

(default)

插入文本或 HTML。