# vui-icon
## 介绍
自制移动端常用交互小图标
## 使用说明
1. 使用`npm install vui-gin`进行安装;
2. 引入全部的icons或其文件
```js
// 引入全部的图标文件 ----- js文件1
import icons from 'vui-gin/core/icons';
// 填充类图标
const add_friend = icons.filled['add-friend'];
element.style.maskImage = `url(${add_friend})`;
...
// 描边类图标
const add_friend = icons.outlined['add-friend'];
element.style.maskImage = `url(${add_friend})`;
...
// 引入全部的样式 ----- js文件2
import 'vui-gin/core/css/icons';
// 填充类图标
const html = '';
...
// 描边类图标
const html = '';
...
```
3. 按需引入icon
```js
// 填充类
import 'vui-gin/core/css/filled/add-friends.css';
const html = '';
// 描边类
import 'vui-gin/core/css/outlined/add-friends.css';
const html = '';
```
## 图标(icon)
### 预览图
### 使用
主要是通过**class**来控制。class 规则是`vui-icon-[style]-[name]`, 比如需要展示预览图中, `filled`样式的`add-friends`, 则 class 为`vui-icon-filled-add-friends`.
### 例子
```html
```