refactor: ♻️ 优化 keyboard 的示例代码 (#1322)

Co-authored-by: zhujihui <zhujihui@primecare.group>

docs/component/datetime-picker-view.md

@@ -144,6 +144,7 @@ const filter = (type, values) => {
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
 | columns-height | picker内部滚筒高 | number | - | 231 | - |
+| item-height | picker item的高度 | number | - | 35 | $LOWEST_VERSION$ |
 | formatter | 自定义弹出层选项文案的格式化函数，返回一个字符串 | function | - | - | - |
 | filter | 自定义过滤选项的函数，返回列的选项数组 | function | - | - | - |
 | minDate | 最小日期，13 位的时间戳    | `timestamp` | - | 当前日期 - 10年 | - |

docs/component/datetime-picker.md

@@ -289,6 +289,7 @@ const displayFormatTabLabel = (items) => {
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
 | columns-height | picker内部滚筒高 | number | - | 231 | - |
+| item-height | picker item的高度 | number | - | 35 | - |
 | title | 弹出层标题 | string | - | - | - |
 | cancel-button-text | 取消按钮文案 | string | - | 取消 | - |
 | confirm-button-text | 确认按钮文案 | string | - | 完成 | - |

docs/component/keyboard.md

@@ -105,9 +105,9 @@ const onDelete = () => showToast('删除')
 <wd-keyboard v-model="value" v-model:visible="visible" v-model:car-lang="lang" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>
 
 <!-- 非受控模式：禁用自动切换 -->
-<wd-cell title="车牌号键盘（非自动切换）" :value="value2" is-link @click="showKeyBoard2" />
+<wd-cell title="车牌号键盘（非受控）" :value="value2" is-link @click="showKeyBoard2" />
 
-<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" :auto-switch-lang="false" @input="onInput" @delete="onDelete"></wd-keyboard>
+<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" auto-switch-lang @input="onInput" @delete="onDelete"></wd-keyboard>
 ```
 
 ```ts
@@ -298,8 +298,8 @@ const onDelete = () => showToast('删除')
 | safeAreaInsetBottom | 是否在底部安全区域内                                                 | `boolean`             | -                          | `true`     | 1.3.10   |
 | extraKey            | 额外按键                                                             | `string` / `string[]` | -                          | -          | 1.3.10   |
 | root-portal         | 是否从页面中脱离出来，用于解决各种 fixed 失效问题                    | `boolean`             | -                          | `false`    | 1.11.0   |
-| v-model:carLang    | 车牌键盘语言模式，当 mode=car 时生效                                 | `string`              | `zh`, `en`                 | -          | 1.12.4   |
+| v-model:carLang    | 车牌键盘语言模式，当 mode=car 时生效                                 | `string`              | `zh`, `en`                 | -          | $LOWEST_VERSION$   |
-| autoSwitchLang    | 是否自动切换车牌键盘语言，当 mode=car 且 car-lang 是非受控状态时生效 | `boolean`             | -                          | `false`    | 1.12.4   |
+| autoSwitchLang    | 是否自动切换车牌键盘语言，当 mode=car 且 car-lang 是非受控状态时生效 | `boolean`             | -                          | `false`    | $LOWEST_VERSION$   |
 
 ## Slot
 

docs/component/message-box.md

@@ -2,6 +2,10 @@
 
 弹出对话框，常用于消息提示、消息确认等，支持函数调用。
 
+:::tip 提示
+全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
+:::
+
 ## Alert 弹框
 
 alert 弹框只有确定按钮，用于强提醒。

docs/component/picker-view.md

@@ -111,6 +111,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
 | loading | 加载中 | boolean | - | false | - |
 | loading-color | 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 | string | - | #4D80F0 | - |
 | columns-height | picker内部滚筒高 | number | - | 231 | - |
+| item-height | picker item的高度 | number | - | 35 | $LOWEST_VERSION$ |
 | value-key | 选项对象中，value对应的 key | string | - | value | - |
 | label-key | 选项对象中，展示的文本对应的 key | string | - | label | - |
 | column-change | 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 `setColumnData` 方法修改其他列的数据源。 | function | - | - | - |

docs/component/toast.md

@@ -4,6 +4,8 @@
 
 :::tip 提示
 `Toast` 自 1.7.0 版本起支持通过 `props` 属性控制组件样式，字段见[props](#props)，需要注意的是函数式调用api的`options`优先级高于`props`。
+
+全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
 :::
 
 ## 基本用法

docs/en-US/component/datetime-picker-view.md

@@ -144,6 +144,7 @@ const filter = (type, values) => {
 | loading | Loading state | boolean | - | false | - |
 | loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated format | string | - | #4D80F0 | - |
 | columns-height | Height of picker's internal roller | number | - | 231 | - |
+| item-height | Height of picker item | number | - | 35 | $LOWEST_VERSION$ |
 | formatter | Custom formatting function for popup layer option text, returns a string | function | - | - | - |
 | filter | Custom function for filtering options, returns column's option array | function | - | - | - |
 | minDate | Minimum date, 13-digit timestamp | `timestamp` | - | Current date - 10 years | - |

docs/en-US/component/keyboard.md

@@ -107,7 +107,7 @@ You can control the language mode of the license plate keyboard through the `car
 <!-- Uncontrolled mode: Disable auto-switching -->
 <wd-cell title="License Plate Keyboard (No Auto-switch)" :value="value2" is-link @click="showKeyBoard2" />
 
-<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" :auto-switch-lang="false" @input="onInput" @delete="onDelete"></wd-keyboard>
+<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" auto-switch-lang @input="onInput" @delete="onDelete"></wd-keyboard>
 ```
 
 ```ts
@@ -298,8 +298,8 @@ const onDelete = () => showToast('Delete')
 | safeAreaInsetBottom | Whether to enable bottom safe area                                                                                    | `boolean`             | -                          | `true`     | 1.3.10  |
 | extraKey            | Extra key                                                                                                             | `string` / `string[]` | -                          | -          | 1.3.10  |
 | root-portal         | Whether to detach from the page, used to solve various fixed positioning issues                                       | `boolean`             | -                          | `false`    | 1.11.0  |
-| v-model:carLang     | License plate keyboard language mode, effective when mode=car                                                         | `string`              | `zh`, `en`                 | -          | 1.12.4  |
+| v-model:carLang     | License plate keyboard language mode, effective when mode=car                                                         | `string`              | `zh`, `en`                 | -          | $LOWEST_VERSION$  |
-| autoSwitchLang      | Whether to automatically switch license plate keyboard language, effective when mode=car and car-lang is uncontrolled | `boolean`             | -                          | `false`    | 1.12.4  |
+| autoSwitchLang      | Whether to automatically switch license plate keyboard language, effective when mode=car and car-lang is uncontrolled | `boolean`             | -                          | `false`    | $LOWEST_VERSION$  |
 
 ## Slot
 

docs/en-US/component/message-box.md

@@ -2,6 +2,10 @@
 
 A dialog box that pops up, commonly used for message prompts, message confirmation, etc., supports function calls.
 
+:::tip Note
+For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.
+:::
+
 ## Alert Dialog
 
 Alert dialog only has a confirm button, used for strong reminders.

docs/en-US/component/picker-view.md

@@ -108,6 +108,7 @@ const onChangeDistrict = (pickerView, value, columnIndex, resolve) => {
 | loading | Loading state | boolean | - | false | - |
 | loading-color | Loading color, can only use hexadecimal color values and cannot use abbreviated form | string | - | #4D80F0 | - |
 | columns-height | Height of picker's internal cylinder | number | - | 231 | - |
+| item-height | Height of picker item | number | - | 35 | $LOWEST_VERSION$ |
 | value-key | Key for value in option object | string | - | value | - |
 | label-key | Key for display text in option object | string | - | label | - |
 | column-change | Function that receives pickerView instance, selected item, current modified column index, resolve as parameters | function | - | - | - |

docs/en-US/component/toast.md

@@ -2,6 +2,12 @@
 
 A lightweight feedback component that appears in the middle of the page.
 
+:::tip Note
+`Toast` supports controlling component styles through the `props` attribute since version 1.7.0. See [props](#props) for fields. Note that the `options` priority of functional call API is higher than `props`.
+
+For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.
+:::
+
 ## Basic Usage
 
 The Toast component is a functional component that can be used by calling the `$toast` method on the current instance.

docs/en-US/guide/common-problems.md

@@ -6,6 +6,9 @@ This section introduces some **common problems** encountered during development
 
 Currently supports WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, and other platforms.
 
+## Are there any best practice sharing?
+Yes, you can follow my WeChat public account "不如摸鱼去", or visit my blog [不如摸鱼去](https://blog.wot-ui.cn/), sharing countless dry goods, waiting for you to see.
+
 ## Does the component library provide components that can be imported individually?
 
 Currently, no. First, the plugin market lacks CI/CD tools, making automated publishing impossible. Maintaining a set of individually importable components is time and effort-consuming. Secondly, the installation methods provided by the component library can already achieve on-demand importing, so there's no need to provide individually importable components.
@@ -197,4 +200,11 @@ First, check if the usage is correct. The `uni-app` platform doesn't support glo
 <wd-toast></wd-toast>
 ```
 
-The functional calls of `Message` and `Toast` are implemented based on `provide/inject`, so your calls must be made within `setup`.
+The functional calls of `Message` and `Toast` are implemented based on `provide/inject`, so your calls must be made within `setup`.
+
+## Why are multiple messageBoxes popping up?
+Check if the page with multiple `messageBox` popups has multiple `<wd-message-box></wd-message-box>` tags with the same `selector` or no `selector` (including components used in the current page). The same applies to `toast`. When using components like `messageBox` in child components, you need to specify a `selector` and ensure the `selector` is unique.
+
+## How to call Toast, Message, Loading globally?
+
+For global calling solutions, see [wot-starter](https://starter.wot-ui.cn/guide/feedback.html), which supports globally callable feedback components for use in scenarios like route navigation guards and network request interceptors.

docs/guide/common-problems.md

@@ -6,6 +6,9 @@
 
 目前支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台。
 
+## 有没有最佳实践分享？
+有，可以关注我的公众号「不如摸鱼去」，也可以访问我的博客[不如摸鱼去](https://blog.wot-ui.cn/)，分享无数干货，等你来看。
+
 ## 组件库有没有提供可以单独引入的组件？
 
 目前是没有的，首先在插件市场缺少`CI/CD`工具，无法实现自动化发布，维护一套单独引入的组件费时费力，其次组件库提供的安装方式均可以实现按需引入，所以是无需提供单独引入的组件的。
@@ -313,6 +316,9 @@ function handleOpened() {
 ## 为何messageBox弹出了多个？
 检查一下弹出多个`messageBox`的页面是否存在多个相同`selector`或无`selector`的`<wd-message-box></wd-message-box>`标签(当前页面包括页面中使用的组件)。`toast`亦是同理，在子组件中使用`messageBox`等组件需要指定`selector`并确保`selector`唯一。
 
+## Toast、Message、Loading 等如何全局调用？
+
+全局调用方案见 [wot-starter](https://starter.wot-ui.cn/guide/feedback.html)，支持在路由导航守卫和网络请求拦截器等场景使用的可全局调用的反馈组件。
 
 
 ## 如何快速解决你的问题？

src/subPages/keyboard/Index.vue

@@ -66,8 +66,8 @@
 
     <wd-keyboard :modal="true" v-model:visible="visible8" @input="onInput" @delete="onDelete" />
 
-    <wd-keyboard v-model="value10" v-model:visible="visible10" mode="car" @input="onInput" @delete="onDelete" :autoSwitchLang="false" />
+    <wd-keyboard v-model="value10" v-model:visible="visible10" mode="car" auto-switch-lang @input="onInput" @delete="onDelete" />
-    <wd-keyboard v-model="value11" v-model:visible="visible11" v-model:carLang="carLang" mode="car" @input="onInput" @delete="onDelete" />
+    <wd-keyboard v-model="value11" v-model:visible="visible11" v-model:car-lang="carLang" mode="car" @input="onInput" @delete="onDelete" />
   </page-wraper>
 </template>
 <script lang="ts" setup>

src/uni_modules/wot-design-uni/components/common/util.ts

@@ -716,7 +716,7 @@ export const isDate = (val: unknown): val is Date => Object.prototype.toString.c
  */
 export function isVideoUrl(url: string): boolean {
   // 使用正则表达式匹配视频文件类型的URL
-  const videoRegex = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)/i
+  const videoRegex = /\.(ogm|webm|ogv|asx|m4v|mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)(?=$|[?#])/i
   return videoRegex.test(url)
 }
 
@@ -727,7 +727,7 @@ export function isVideoUrl(url: string): boolean {
  */
 export function isImageUrl(url: string): boolean {
   // 使用正则表达式匹配图片URL
-  const imageRegex = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i
+  const imageRegex = /\.(xbm|tif|pjp|apng|svgz|jpeg|jpg|heif|ico|tiff|heic|pjpeg|avif|gif|png|svg|webp|jfif|bmp|dpg|image)(?=$|[?#])/i
   return imageRegex.test(url)
 }
 

src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts

@@ -21,6 +21,10 @@ export const datetimePickerViewProps = {
    * picker内部滚筒高
    */
   columnsHeight: makeNumberProp(217),
+  /**
+   * picker item的高度
+   */
+  itemHeight: makeNumberProp(35),
   /**
    * 选项的key
    */

src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue

@@ -7,6 +7,7 @@
     v-model="pickerValue"
     :columns="columns"
     :columns-height="columnsHeight"
+    :item-height="itemHeight"
     :columnChange="columnChange"
     :loading="loading"
     :loading-color="loadingColor"

src/uni_modules/wot-design-uni/components/wd-input/types.ts

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
 
@@ -185,3 +185,5 @@ export const inputProps = {
    */
   markerSide: makeStringProp<'before' | 'after'>('before')
 }
+
+export type InputProps = ExtractPropTypes<typeof inputProps>

src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts

@@ -30,6 +30,10 @@ export const pickerViewProps = {
    * picker内部滚筒高
    */
   columnsHeight: makeNumberProp(217),
+  /**
+   * picker item的高度
+   */
+  itemHeight: makeNumberProp(35),
   /**
    * 选项对象中，value对应的 key
    */

src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue

@@ -52,7 +52,6 @@ const props = defineProps(pickerViewProps)
 const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
 
 const formatColumns = ref<ColumnItem[][]>([]) // 格式化后的列数据
-const itemHeight = ref<number>(35)
 const selectedIndex = ref<Array<number>>([]) // 格式化之后，每列选中的下标集合
 
 watch(

src/uni_modules/wot-design-uni/components/wd-toast/index.ts

@@ -78,15 +78,15 @@ export const getToastOptionKey = (selector: string) => {
 
 export const toastIcon = {
   success() {
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42"><defs><linearGradient id="c" x1="50%" x2="50%" y1=".127%" y2="100%"><stop offset="0%" stop-color="#ACFFBD" stop-opacity=".208"/><stop offset="100%" stop-color="#10B87C"/></linearGradient><filter id="a" width="226.3%" height="260%" x="-63.2%" y="-80%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.122733141 0 0 0 0 0.710852582 0 0 0 0 0.514812768 0 0 0 1 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><rect id="b" width="3" height="8.5" x="3.418" y="5.814" rx="1.5"/></defs><circle cx="21" cy="21" r="20" fill="#34D19D" opacity=".4"/><circle cx="21" cy="21" r="16" fill="#34D19D"/><g filter="url(#a)" transform="translate(11.5 14)"><mask id="d" fill="#fff"><use xlink:href="#b"/></mask><use xlink:href="#b" fill="#C4FFEB" transform="rotate(-45 4.918 10.064)"/><path fill="url(#c)" d="M4.716 9.523h3v3.699h-3z" mask="url(#d)" transform="rotate(-45 6.216 11.372)"/><rect width="3" height="16.509" x="10.136" y="-1.022" fill="#FFF" rx="1.5" transform="scale(1 -1)rotate(-45 -5.825 0)"/></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#34D19D" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#34D19D"/><path d="M19 24l4 4 8-8" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'
   },
   warning() {
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42"><defs><filter id="a" width="580%" height="220%" x="-240%" y="-60%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.824756567 0 0 0 0 0.450356612 0 0 0 0 0.168550194 0 0 0 1 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><circle cx="21" cy="21" r="20" fill="#F0883A" opacity=".4"/><circle cx="21" cy="21" r="16" fill="#F0883A"/><g filter="url(#a)" transform="translate(18.5 10.8)"><rect width="3" height="12.432" x=".993" y=".955" fill="#FFF" rx="1.5" transform="matrix(1 0 0 -1 0 14.343)"/><rect width="3" height="4.004" x="1.009" y="15.201" fill="#FFDEC5" rx="1.5" transform="matrix(1 0 0 -1 0 34.405)"/></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#F0883A" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#F0883A"/><rect x="22.5" y="14" width="3" height="12" fill="#FFF" rx="1.5"/><circle cx="24" cy="30" r="2" fill="#FFF"/></svg>'
   },
   info() {
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" width="42" height="42"><defs><filter id="a" width="700%" height="214.3%" x="-300%" y="-57.1%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0.362700096 0 0 0 0 0.409035039 0 0 0 0 0.520238904 0 0 0 1 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><circle cx="21" cy="21" r="20" fill="#909CB7" opacity=".4"/><circle cx="21" cy="21" r="16" fill="#909CB7"/><g filter="url(#a)" transform="translate(18.5 9.8)"><g transform="rotate(-180 1.996 10.102)"><rect width="3" height="14" fill="#FFF" rx="1.5" transform="matrix(1 0 0 -1 0 14)"/><rect width="3" height="4" y="16" fill="#EEE" rx="1.5" transform="matrix(1 0 0 -1 0 36)"/></g></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#909CB7" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#909CB7"/><circle cx="24" cy="18" r="2" fill="#FFF"/><rect x="22.5" y="22" width="3" height="12" fill="#FFF" rx="1.5"/></svg>'
   },
   error() {
-    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd"><circle cx="21" cy="21" r="20" fill="#fa4350" fill-opacity=".4"/><circle cx="21" cy="21" r="16" fill="#fa4350" fill-opacity=".9"/><path fill="#ffdfdf" d="M15.061 27.081a1.5 1.5 0 0 1 0-2.121l9.899-9.899a1.5 1.5 0 1 1 2.121 2.121l-9.899 9.899a1.5 1.5 0 0 1-2.121 0"/><path fill="url(#a)" d="m21.778 22.485-2.829 2.829-2.121-2.121 2.829-2.829z"/><path fill="url(#b)" d="m25.314 18.949-2.829 2.829-2.121-2.121 2.829-2.829z"/><path fill="#fff" d="M27.081 27.081a1.5 1.5 0 0 1-2.121 0l-9.899-9.899a1.5 1.5 0 1 1 2.121-2.121l9.899 9.899a1.5 1.5 0 0 1 0 2.121"/><defs><linearGradient id="a" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(-45 38.197 -9.48)scale(3.9698)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffdfdf"/><stop offset="1" stop-color="#f9bebe"/></linearGradient><linearGradient id="b" x1="0" x2="1" y1="0" y2="0" gradientTransform="rotate(135 8.412 13.965)scale(3.9698)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffdfdf"/><stop offset="1" stop-color="#f9bebe"/></linearGradient></defs></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#fa4350" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#fa4350"/><path d="M18 18l12 12M30 18L18 30" stroke="#FFF" stroke-width="2.5" stroke-linecap="round"/></svg>'
   }
 }