docs(switch): add activeIcon

Author: koory1st

docs/src/lib/i18n/zh/switch.js

@@ -9,4 +9,7 @@ export default {
   cswitch04020:
     '使用activeText属性与inactiveText属性来设置开关的文字描述。 使用 inlinePrompt 属性来控制文本是否显示在点内。',
   cswitch04030: '使用activeText属性与inactiveText属性来设置开关的文字描述。',
+  cswitch05010: '显示自定义图标',
+  cswitch05020:
+    '使用 activeIcon 和 inactiveIcon slot来添加图标。 使用 inlinePrompt 属性来控制图标显示在点内。',
 };

docs/src/routes/component/switch/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import { SvelSwitch } from '@svelement-ui/all';
+  import { Check, Close } from '@svelement-ui/icon';
   import Example from '$lib/example.svelte';
   import { getContext } from 'svelte';
 
@@ -95,5 +96,36 @@
   />
 </Example>
 
+<h2>{$langFn('cswitch05010')}</h2>
+<p>{$langFn('cswitch05020')}</p>
+<Example
+  code={`
+<script>
+  import { Check, Close } from '@svelement-ui/icon';
+@@@/>
+<SvelSwitch>
+  <Check slot="activeIcon" />
+  <Close slot="inactiveIcon" />
+</SvelSwitch>
+
+<br />
+<SvelSwitch inlinePrompt>
+  <Check slot="activeIcon" />
+  <Close slot="inactiveIcon" />
+</SvelSwitch>
+`}
+>
+  <SvelSwitch>
+    <Check slot="activeIcon" />
+    <Close slot="inactiveIcon" />
+  </SvelSwitch>
+
+  <br />
+  <SvelSwitch inlinePrompt>
+    <Check slot="activeIcon" />
+    <Close slot="inactiveIcon" />
+  </SvelSwitch>
+</Example>
+
 <style>
 </style>