[new feature] Icon: add tag prop (#2986)

packages/button/en-US.md

@@ -63,7 +63,7 @@ Vue.use(Button);
 | type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
 | size | Can be set to `large` `small` `mini` | `String` | `normal` |
 | text | Text | `String` | - |
-| tag | Tag | `String` | `button` |
+| tag | HTML Tag | `String` | `button` |
 | native-type | Native Type Attribute | `String` | `''` |
 | plain | Whether to be plain button | `Boolean` | `false` |
 | block | Whether to set display block | `Boolean` | `false` |

packages/button/index.tsx

@@ -8,7 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
 export type ButtonProps = RouteProps & {
-  tag: string;
+  tag: keyof HTMLElementTagNameMap;
   type: string;
   size: string;
   text?: string;

packages/goods-action-mini-btn/index.tsx

@@ -31,6 +31,7 @@ function GoodsActionMiniBtn(
     <div class={[bem(), 'van-hairline']} onClick={onClick} {...inherit(ctx)}>
       <Icon
         class={[bem('icon'), props.iconClass]}
+        tag="div"
         info={props.info}
         name={props.icon}
       />

packages/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -4,21 +4,35 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-goods-action">
-      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
-          <!----></i>客服</div>
-      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
-          <!----></i>购物车</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+      <div class="van-goods-action-mini-btn van-hairline">
+        <div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div class="van-goods-action-mini-btn van-hairline">
+        <div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
+          <!---->
+        </div>购物车
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
   <div>
     <div class="van-goods-action">
-      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
-          <!----></i>客服</div>
-      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-mini-btn van-hairline">
+        <div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
+          <!---->
+        </div>客服
+      </div>
+      <div class="van-goods-action-mini-btn van-hairline">
+        <div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
           <div class="van-info">5</div>
-        </i>购物车</div>
-      <div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
-          <!----></i>店铺</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+        </div>购物车
+      </div>
+      <div class="van-goods-action-mini-btn van-hairline">
+        <div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
+          <!---->
+        </div>店铺
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
 </div>

packages/goods-action/test/__snapshots__/index.spec.js.snap

@@ -3,6 +3,9 @@
 exports[`BigBtn render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">Default Content</span></button>`;
 
 exports[`Mini render default slot 1`] = `
-<div class="van-goods-action-mini-btn van-hairline"><i class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
-    <!----></i>Default Content</div>
+<div class="van-goods-action-mini-btn van-hairline">
+  <div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
+    <!---->
+  </div>Default Content
+</div>
 `;

packages/icon/en-US.md

@@ -62,7 +62,7 @@ import 'vant/lib/icon/local.css';
 | color | Icon color | `String` | `inherit` |
 | size | Icon size | `String` | `inherit` |
 | class-prefix | ClassName prefix | `String` | `van-icon` |
-
+| tag | HTML Tag | `String` | `i` |
 
 ### Event
 

packages/icon/index.tsx

@@ -8,6 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
 export type IconProps = {
+  tag: keyof HTMLElementTagNameMap;
   name: string;
   size?: string;
   color?: string;
@@ -30,7 +31,7 @@ function Icon(
   const urlIcon = isSrc(props.name);
 
   return (
-    <i
+    <props.tag
       class={[
         props.classPrefix,
         urlIcon ? 'van-icon--image' : `${props.classPrefix}-${props.name}`
@@ -44,7 +45,7 @@ function Icon(
       {slots.default && slots.default()}
       {urlIcon && <img src={props.name} />}
       <Info info={props.info} />
-    </i>
+    </props.tag>
   );
 }
 
@@ -53,6 +54,10 @@ Icon.props = {
   size: String,
   color: String,
   info: [String, Number],
+  tag: {
+    type: String,
+    default: 'i'
+  },
   classPrefix: {
     type: String,
     default: 'van-icon'

packages/icon/test/__snapshots__/index.spec.js.snap

@@ -14,3 +14,9 @@ exports[`render icon with url name 1`] = `
 <i class="van-icon van-icon--image"><img src="https://img.yzcdn.com/icon.jpg">
   <!----></i>
 `;
+
+exports[`tag prop 1`] = `
+<div class="van-icon van-icon-undefined">
+  <!---->
+</div>
+`;

packages/icon/test/index.spec.js

@@ -27,3 +27,12 @@ test('render icon default slot', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('tag prop', () => {
+  const wrapper = mount(Icon, {
+    propsData: {
+      tag: 'div'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});

packages/icon/zh-CN.md

@@ -65,10 +65,10 @@ import 'vant/lib/icon/local.css';
 | color | 图标颜色 | `String` | `inherit` | 1.1.3 |
 | size | 图标大小，如 `20px` `2em` | `String` | `inherit` | 1.1.15 |
 | class-prefix | 类名前缀 | `String` | `van-icon` | 1.2.1 |
+| tag | HTML 标签 | `String` | `i` | 1.6.10 |
 
 ### Event
 
 | 事件名 | 说明 | 参数 |
 |------|------|------|
 | click | 点击图标时触发 | - |
-