@@ -110,6 +119,8 @@
```
diff --git a/examples/views/docs/component/icon.md b/examples/views/docs/component/icon.md
index 7eede4f..58eb362 100644
--- a/examples/views/docs/component/icon.md
+++ b/examples/views/docs/component/icon.md
@@ -1,10 +1,10 @@
# Icon 图标
-使用iconfont图标
+基于`iconfont`标准,支持`font-class`、`symbol`两种iconfont引用方式,支持引用本地或网络图片
## 基础用法
-::: snippet 设置`name`改变图标,name与`iconfont`项目中的`icon-xxx`中的内容为准
+::: snippet 设置`name`改变图标,默认为`font-class`模式
```html
@@ -19,60 +19,66 @@
:::
-## 大小
+## 多色图标
-::: snippet 设置`size`改变图标大小,支持px与rem等css标准样式
+::: snippet 设置`svg`转换为`symbol`模式
```html
-
-
-
+
+
+
+
```
:::
-## 颜色
+## 图片图标
-::: snippet 设置`color`改变图标颜色,支持HEX与RGB等CSS标准样式
+::: snippet 设置`src`即图片模式
```html
-
-
+
+
+
+
```
:::
-## 标记信息
+## 大小
-::: snippet 设置`info`改变右上角标记信息
+::: snippet 设置`size`改变图标大小,`unit`设置单位,默认`rem`
```html
-
-
+
+
+
+
```
:::
-## 标记点
+## 颜色
-::: snippet 设置`dot`在右上角显示一个标记点
+::: snippet 设置`color`改变图标颜色,支持HEX与RGB等CSS标准样式
```html
-
+
+
```
@@ -88,13 +94,8 @@
name | 图标名 | String | - | -
fontFamily | 图标类型 | String | - | iconfont
classPrefix | 图标前缀 | String | - | icon-
-size | 大小 | String | - | -
+size | 大小 | Number | - | -
+unit | 单位 | String | - | rem
color | 颜色 | String | - | -
-info | 角标内容 | Number, String | - | -
-dot | 标记点 | Boolean | true,false | -
-
-## Events 事件
-
-事件名称|说明|回调参数
--|-|-
-click | 按钮点击事件 | -
\ No newline at end of file
+svg | 使用symbol引用svg | Boolean | - | -
+src | 图片地址 | String | - | -
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 8582fde..b7e35a3 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -1,6 +1,10 @@
非markdown页示例
+

+
@@ -13,3 +17,17 @@ export default {
methods: {},
};
+
+
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index b23851d..80f901e 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -5,7 +5,7 @@
-
+
@@ -45,7 +45,7 @@ export default {
title: String,
label: String,
value: [String, Number],
- icon: String,
+ icon: [String, Object],
rightIcon: String,
size: String,
border: {
@@ -79,6 +79,12 @@ export default {
}
return this.clickable;
},
+ bindIcon() {
+ if (typeof this.icon === 'object' && this.icon instanceof Object) {
+ return this.icon;
+ }
+ return { name: this.icon };
+ },
bindClass() {
return {
'zui-cell--border-long': this.long,
diff --git a/packages/icon/index.css b/packages/icon/index.css
deleted file mode 100644
index c8dd050..0000000
--- a/packages/icon/index.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.zui-icon {
- position: relative;
- display: inline-block;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
-}
-
-.zui-icon::before {
- display: inline-block;
-}
-
-.zui-info {
- position: absolute;
- top: 0;
- right: 0;
- box-sizing: border-box;
- min-width: 1rem;
- padding: 0 0.125rem;
- color: #fff;
- font-weight: 500;
- font-size: 0.75rem;
- font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
- line-height: 0.875rem;
- text-align: center;
- background-color: #ee0a24;
- border: 1px solid #fff;
- border-radius: 1rem;
- -webkit-transform: translate(50%, -50%);
- transform: translate(50%, -50%);
- -webkit-transform-origin: 100%;
- transform-origin: 100%;
-}
-
-.zui-info.dot {
- height: 0.875rem;
- width: 0.875rem;
- min-width: 0.875rem !important;
-}
\ No newline at end of file
diff --git a/packages/icon/index.scss b/packages/icon/index.scss
new file mode 100644
index 0000000..e6a0acf
--- /dev/null
+++ b/packages/icon/index.scss
@@ -0,0 +1,16 @@
+.zui-icon {
+ font-size: $font-lg;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ &__svg, &__img {
+ display: inline-block;
+ height: $font-lg;
+ width: $font-lg;
+ vertical-align: -$font-lg * 0.15;
+ fill: currentColor;
+ overflow: hidden;
+ }
+ &__img {
+ object-fit: contain;
+ }
+}
\ No newline at end of file
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 16e486a..0dbc4e6 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,12 +1,20 @@
-
-
- {{ info }}
-
-
-
-
--
libgit2 0.21.0