update docs

packages/artplayer/src/icons/switch-off.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#ffffff" d="M687.814 197.137H336.186c-175.814 0-319.67 141.708-319.67 314.88s143.856 314.846 319.67 314.846h351.612c175.83 0 319.686-141.675 319.686-314.846s-143.856-314.88-319.67-314.88zM335.591 756.57c-135.085 0-244.57-109.502-244.57-244.554 0-135.07 109.485-244.555 244.57-244.555 135.053 0 244.538 109.486 244.538 244.555 0 135.052-109.485 244.554-244.538 244.554z" />
+<svg class="icon" width="26" height="26" viewBox="0 0 1740 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#ffffff" d="M511.8976 1024h670.5152c282.4192-0.4096 511.1808-229.4784 511.1808-511.8976 0-282.4192-228.7616-511.488-511.1808-511.8976H511.8976C229.4784 0.6144 0.7168 229.6832 0.7168 512.1024c0 282.4192 228.7616 511.488 511.1808 511.8976zM511.3344 48.64A464.5888 464.5888 0 1 1 48.0256 513.024 463.872 463.872 0 0 1 511.3344 48.4352V48.64z" />
 </svg>

packages/artplayer/src/icons/switch-on.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200px" height="120.05px" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#ffffff" d="M1053.866667 827.733333c170.666667 0 311.466667-136.533333 311.466666-307.2S1224.533333 213.333333 1053.866667 213.333333h-396.8C482.133333 213.333333 341.333333 349.866667 341.333333 520.533333s140.8 307.2 311.466667 307.2h401.066667zM1049.6 256c145.066667 0 264.533333 119.466667 264.533333 264.533333s-119.466667 264.533333-264.533333 264.533334-264.533333-119.466667-264.533333-264.533334S904.533333 256 1049.6 256z"  />
+<svg class="icon" width="26" height="26" viewBox="0 0 1664 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#648FFC" d="M1152 0H512a512 512 0 0 0 0 1024h640a512 512 0 0 0 0-1024z m0 960a448 448 0 1 1 448-448 448 448 0 0 1-448 448z"  />
 </svg>

packages/artplayer/src/setting/index.js

@@ -240,22 +240,63 @@ export default class Setting extends Component {
         append($icon, item.icon || icons.config);
         append($left, $icon);
 
+        item._$icon = $icon;
+
+        def(item, 'icon', {
+            get() {
+                return $icon.innerHTML;
+            },
+            set(value) {
+                if (typeof value === 'string' || typeof value === 'number') {
+                    $icon.innerHTML = value;
+                }
+            },
+        });
+
         const $html = document.createElement('div');
         addClass($html, 'art-setting-item-left-text');
         append($html, item.html || '');
         append($left, $html);
+        item._$html = $html;
+
+        def(item, 'html', {
+            get() {
+                return $html.innerHTML;
+            },
+            set(value) {
+                if (typeof value === 'string' || typeof value === 'number') {
+                    $html.innerHTML = value;
+                }
+            },
+        });
 
         const $switch = document.createElement('div');
-        addClass($switch, 'art-setting-item-right-switch');
-        append($switch, item.switch ? icons.switchOn : icons.switchOff);
+        addClass($switch, 'art-setting-item-right-icon');
+        const $switchOn = append($switch, icons.switchOn);
+        const $switchOff = append($switch, icons.switchOff);
+        setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
         append($right, $switch);
+        item._$switch = item.switch;
+
+        def(item, 'switch', {
+            get() {
+                return item._$switch;
+            },
+            set(value) {
+                item._$switch = value;
+                if (value) {
+                    setStyle($switchOff, 'display', 'none');
+                    setStyle($switchOn, 'display', null);
+                } else {
+                    setStyle($switchOff, 'display', null);
+                    setStyle($switchOn, 'display', 'none');
+                }
+            },
+        });
 
         const event = proxy($item, 'click', async (event) => {
             if (item.onSwitch) {
-                const result = await item.onSwitch.call(this.art, item, $item, event);
-                item.switch = result;
-                $switch.innerHTML = '';
-                append($switch, result ? icons.switchOn : icons.switchOff);
+                item.switch = await item.onSwitch.call(this.art, item, $item, event);
             }
         });
 

packages/artplayer/src/style/setting.less

@@ -84,7 +84,6 @@
                         justify-content: center;
                         align-items: center;
                         height: 24px;
-                        width: 24px;
                     }
                 }
             }