style(Cell): adjust icon margin to 4px (#6844)

src/cell/README.md

@@ -95,9 +95,21 @@ Vue.use(CellGroup);
 <van-cell title="单元格" icon="shop-o">
   <!-- Use the right-icon slot to customize the right icon -->
   <template #right-icon>
-    <van-icon name="search" style="font-size: 16px; line-height: inherit;" />
+    <van-icon name="search" class="search-icon" />
   </template>
 </van-cell>
+
+<style>
+  .custom-title {
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+
+  .search-icon {
+    font-size: 16px;
+    line-height: inherit;
+  }
+</style>
 ```
 
 ### Vertical Center

src/cell/README.zh-CN.md

@@ -14,7 +14,7 @@ Vue.use(CellGroup);
 
 ### 基础用法
 
-`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框
+`Cell` 可以单独使用，也可以与 `CellGroup` 搭配使用，`CellGroup` 可以为 `Cell` 提供上下外边框。
 
 ```html
 <van-cell-group>
@@ -25,7 +25,7 @@ Vue.use(CellGroup);
 
 ### 单元格大小
 
-通过`size`属性可以控制单元格的大小
+通过 `size` 属性可以控制单元格的大小。
 
 ```html
 <van-cell title="单元格" value="内容" size="large" />
@@ -34,7 +34,7 @@ Vue.use(CellGroup);
 
 ### 展示图标
 
-通过`icon`属性在标题左侧展示图标
+通过 `icon` 属性在标题左侧展示图标。
 
 ```html
 <van-cell title="单元格" icon="location-o" />
@@ -42,7 +42,7 @@ Vue.use(CellGroup);
 
 ### 只设置 value
 
-只设置`value`时，内容会靠左对齐
+只设置 `value` 时，内容会靠左对齐。
 
 ```html
 <van-cell value="内容" />
@@ -50,7 +50,7 @@ Vue.use(CellGroup);
 
 ### 展示箭头
 
-设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
+设置 `is-link` 属性后会在单元格右侧显示箭头，并且可以通过 `arrow-direction` 属性控制箭头方向。
 
 ```html
 <van-cell title="单元格" is-link />
@@ -60,7 +60,7 @@ Vue.use(CellGroup);
 
 ### 页面导航
 
-可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
+可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
 
 ```html
 <van-cell title="URL 跳转" is-link url="/vant/mobile.html" />
@@ -69,7 +69,7 @@ Vue.use(CellGroup);
 
 ### 分组标题
 
-通过`CellGroup`的`title`属性可以指定分组标题
+通过 `CellGroup` 的 `title` 属性可以指定分组标题。
 
 ```html
 <van-cell-group title="分组1">
@@ -82,7 +82,7 @@ Vue.use(CellGroup);
 
 ### 使用插槽
 
-如以上用法不能满足你的需求，可以使用插槽来自定义内容
+如以上用法不能满足你的需求，可以使用插槽来自定义内容。
 
 ```html
 <van-cell value="内容" is-link>
@@ -96,14 +96,26 @@ Vue.use(CellGroup);
 <van-cell title="单元格" icon="shop-o">
   <!-- 使用 right-icon 插槽来自定义右侧图标 -->
   <template #right-icon>
-    <van-icon name="search" style="font-size: 16px; line-height: inherit;" />
+    <van-icon name="search" class="search=icon" />
   </template>
 </van-cell>
+
+<style>
+  .custom-title {
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+
+  .search-icon {
+    font-size: 16px;
+    line-height: inherit;
+  }
+</style>
 ```
 
 ### 垂直居中
 
-通过`center`属性可以让`Cell`的左右内容都垂直居中
+通过 `center` 属性可以让 `Cell` 的左右内容都垂直居中。
 
 ```html
 <van-cell center title="单元格" value="内容" label="描述信息" />

src/cell/demo/index.vue

@@ -60,10 +60,7 @@
 
       <van-cell icon="shop-o" :title="t('cell')">
         <template #right-icon>
-          <van-icon
-            name="search"
-            style="font-size: 16px; line-height: inherit;"
-          />
+          <van-icon name="search" class="search-icon" />
         </template>
       </van-cell>
     </demo-block>
@@ -117,8 +114,13 @@ export default {
 <style lang="less">
 .demo-cell {
   .custom-title {
-    margin-right: 5px;
+    margin-right: 4px;
     vertical-align: middle;
   }
+
+  .search-icon {
+    font-size: 16px;
+    line-height: inherit;
+  }
 }
 </style>

src/cell/index.less

@@ -57,11 +57,11 @@
   }
 
   &__left-icon {
-    margin-right: 5px;
+    margin-right: @padding-base;
   }
 
   &__right-icon {
-    margin-left: 5px;
+    margin-left: @padding-base;
     color: @cell-right-icon-color;
   }
 

src/cell/test/__snapshots__/demo.spec.js.snap

@@ -94,7 +94,7 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
         <!----></i>
-      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="font-size: 16px; line-height: inherit;">
+      <div class="van-cell__title"><span>单元格</span></div><i class="search-icon van-icon van-icon-search">
         <!----></i>
     </div>
   </div>