feat(Popup): add icon-prefix prop (#8793)

src/popup/Popup.tsx

@@ -49,6 +49,7 @@ export default defineComponent({
     round: Boolean,
     closeable: Boolean,
     transition: String,
+    iconPrefix: String,
     closeOnPopstate: Boolean,
     safeAreaInsetBottom: Boolean,
     position: {
@@ -155,6 +156,7 @@ export default defineComponent({
             tabindex={0}
             name={props.closeIcon}
             class={bem('close-icon', props.closeIconPosition)}
+            classPrefix={props.iconPrefix}
             onClick={onClickCloseIcon}
           />
         );

src/popup/README.md

@@ -136,6 +136,7 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `false` |
 | close-icon | Close icon name | _string_ | `cross` |
 | close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
+| icon-prefix `v3.0.18` | Icon className prefix | _string_ | `van-icon` |
 | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Return the mount node for Popup | _string \| Element_ | - |

src/popup/README.zh-CN.md

@@ -140,6 +140,7 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `false` |
 | close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | close-icon-position | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
+| icon-prefix `v3.0.18` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点 | _string \| Element_ | - |

src/popup/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
+<transition-stub>
+  <div class="van-overlay">
+  </div>
+</transition-stub>
+<transition-stub>
+  <div class="van-popup van-popup--center">
+    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+       role="button"
+       tabindex="0"
+    >
+    </i>
+  </div>
+</transition-stub>
+`;
+
 exports[`should render correct close icon when using close-icon prop 1`] = `
 <i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right"
    role="button"

src/popup/test/index.spec.js

@@ -189,3 +189,15 @@ test('should render correct close icon when using close-icon prop', () => {
 
   expect(wrapper.find('.van-popup__close-icon').html()).toMatchSnapshot();
 });
+
+test('should change icon class prefix when using icon-prefix prop', () => {
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      closeable: true,
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});