Skip to content

Commit 727f4bf

Browse files
chuanshuoyechuanshuoye
committed
feat: icon Component add iconfont symbol
1 parent 85cf04b commit 727f4bf

File tree

6 files changed

+94
-16
lines changed

6 files changed

+94
-16
lines changed

‎docs/2.0.0/icon.md

+41-2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,44 @@
1818

1919
:::
2020

21+
:::demo Iconfont Symbol自定义图标
22+
23+
```html
24+
<div class="grid">
25+
<div
26+
class="grid-column"
27+
style="width: 33.33%;display: inline-block;padding: 15px;text-align: center;"
28+
>
29+
<za-icon tag="symbol" theme="primary" type="home" class="icon"></za-icon>
30+
<span class="icon-name">home</span>
31+
</div>
32+
<div
33+
class="grid-column"
34+
style="width: 33.33%;display: inline-block;padding: 15px;text-align: center;"
35+
>
36+
<za-icon tag="symbol" theme="primary" type="insurance" class="icon"></za-icon>
37+
<span class="icon-name">insurance</span>
38+
</div>
39+
<div
40+
class="grid-column"
41+
style="width: 33.33%;display: inline-block;padding: 15px;text-align: center;"
42+
>
43+
<za-icon tag="symbol" theme="primary" type="user" class="icon"></za-icon>
44+
<span class="icon-name">user</span>
45+
</div>
46+
</div>
47+
```
48+
49+
:::
50+
51+
> Iconfont Symbol使用说明
52+
53+
```js
54+
import { Icon } from 'zarm-vue';
55+
Icon.createSymbolIconfont('//at.alicdn.com/t/font_1340918_4p9b5skcr79.js');
56+
```
57+
58+
2159
### Vue Script
2260

2361
```javascript
@@ -49,7 +87,8 @@ export default {
4987

5088
#### Icon Attributes
5189

52-
| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
90+
| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
5391
| :-------- | :----- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------- |
54-
| theme | string | 'default' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
92+
| theme | string | 'default' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
5593
| type | string | | 'right', 'right-round', 'right-round-fill','wrong', 'wrong-round', 'wrong-round-fill', 'info-round', 'info-round-fill', 'question-round', 'question-round-fill', 'warning-round', 'warning-round-fill', 'arrow-left', 'arrow-right', 'arrow-top', 'arrow-bottom', 'add', 'add-round', 'add-round-fill', 'minus', 'minus-round', 'minus-round-fill', 'broadcast', 'search' | 图标类型 |
94+
| tag | string | | 'symbol' | iconfont symbol类型图标 |

‎docs/2.0.0/tabBar.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@
77
<za-button slot="description" ghost @click="toggle">{{ visible ? '隐藏' : '展示'}}</za-button>
88
</za-cell>
99
<za-tab-bar :visible="visible" :defaultActiveKey="1" @change="handleChange">
10-
<za-tab-bar-item :item-key="1" title="first">
11-
<za-icon slot="icon" theme="primary" type="add" class="icon"></za-icon>
12-
<za-icon slot="activeIcon" theme="primary" type="add-round" class="icon"></za-icon>
10+
<za-tab-bar-item :item-key="1" title="首页">
11+
<za-icon slot="icon" tag="symbol" type="home" class="icon"></za-icon>
12+
<za-icon slot="activeIcon" tag="symbol" theme="primary" type="home" class="icon"></za-icon>
1313
</za-tab-bar-item>
14-
<za-tab-bar-item :item-key="2" title="first">
14+
<za-tab-bar-item :item-key="2" title="保险">
1515
<za-badge slot="icon" sup shape="circle" text="3" @click="handleClick">
16-
<za-icon theme="primary" type="minus" class="icon"></za-icon>
16+
<za-icon tag="symbol" type="insurance" class="icon"></za-icon>
1717
</za-badge>
1818
<za-badge slot="activeIcon" sup shape="circle" text="3" @click="handleClick">
19-
<za-icon theme="primary" type="minus-round" class="icon"></za-icon>
19+
<za-icon tag="symbol" theme="primary" type="insurance" class="icon"></za-icon>
2020
</za-badge>
2121
</za-tab-bar-item>
22-
<za-tab-bar-item :item-key="3" title="first">
23-
<za-icon slot="icon" theme="primary" type="arrow-top" class="icon"></za-icon>
24-
<za-icon slot="activeIcon" theme="primary" type="arrow-bottom" class="icon"></za-icon>
22+
<za-tab-bar-item :item-key="3" title="用户">
23+
<za-icon slot="icon" tag="symbol" type="user" class="icon"></za-icon>
24+
<za-icon slot="activeIcon" tag="symbol" theme="primary" type="user" class="icon"></za-icon>
2525
</za-tab-bar-item>
2626
</za-tab-bar>
2727
```
@@ -35,7 +35,7 @@
3535
export default {
3636
data() {
3737
return {
38-
activeKey: null,
38+
activeKey: 1,
3939
visible: true,
4040
}
4141
},
@@ -77,4 +77,4 @@ export default {
7777

7878
| 事件名称 | 说明 | 回调参数 |
7979
| :----------- | :------------------- | :--------------------------------------------- |
80-
| change | 点击`tabbarItem`触发的选中事件 | 值变化时触发的回调函数 |
80+
| change | 点击`tabbarItem`触发的选中事件 | 值变化时触发的回调函数 |

‎example/main.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import 'babel-polyfill';
22
import Vue from 'vue';
3-
import zarmVue from '../src/index';
3+
import zarmVue, { Icon } from '../src/index';
44
import App from './app';
55
import router from './router';
66
import '../styles/index.scss';
77
import './styles/pages/IndexPage.scss';
88

99
Vue.config.productionTip = false;
10+
11+
Icon.createSymbolIconfont('//at.alicdn.com/t/font_1340918_4p9b5skcr79.js');
12+
1013
Vue.use(zarmVue);
1114
/* eslint-disable no-new */
1215
new Vue({

‎example/styles/pages/IconPage.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.icon {
66
display: block;
77
margin-bottom: r(15);
8-
font-size: r(45);
8+
font-size: r(30);
99

1010
&-name {
1111
font-size: r(13);

‎src/icon/index.js

+25
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,29 @@ Icon.install = function (Vue) {
55
Vue.component(Icon.name, Icon);
66
};
77

8+
const customCache = new Set();
9+
10+
Icon.createSymbolIconfont = (scriptUrl = '') => {
11+
/**
12+
* DOM API required.
13+
* Make sure in browser environment.
14+
* The Custom Icon will create a <script/>
15+
* that loads SVG symbols and insert the SVG Element into the document body.
16+
*/
17+
if (
18+
typeof document !== 'undefined'
19+
&& typeof window !== 'undefined'
20+
&& typeof document.createElement === 'function'
21+
&& typeof scriptUrl === 'string'
22+
&& scriptUrl.length
23+
&& !customCache.has(scriptUrl)
24+
) {
25+
const script = document.createElement('script');
26+
script.setAttribute('src', scriptUrl);
27+
script.setAttribute('data-namespace', scriptUrl);
28+
customCache.add(scriptUrl);
29+
document.body.appendChild(script);
30+
}
31+
};
32+
833
export default Icon;

‎src/icon/src/icon.vue

+12-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,17 @@
33
[`${prefixCls}`]: true,
44
[`${prefixCls}-${type}`]: !!type,
55
[`${prefixCls}--${theme}`]: !!theme,
6-
}' @click='handleClick'></i>
6+
}' @click='handleClick'>
7+
<svg
8+
v-if='tag === "symbol"'
9+
width='1em'
10+
height='1em'
11+
fill='currentColor'
12+
viewBox='0 0 32 32'
13+
>
14+
<use :xlink:href='`#${type}`' />
15+
</svg>
16+
</i>
717
</template>
818

919
<script>
@@ -17,6 +27,7 @@ export default {
1727
default: 'za-icon',
1828
},
1929
type: String,
30+
tag: String,
2031
theme: {
2132
type: String,
2233
validator: defaultThemeValidator,

0 commit comments

Comments
 (0)