diff --git a/src/components/base/custome_element_l10n.ts b/src/components/base/custome_element_l10n.ts
new file mode 100644
index 0000000..ba666ab
--- /dev/null
+++ b/src/components/base/custome_element_l10n.ts
@@ -0,0 +1,179 @@
+import {StarBaseElement} from './star-base-element'
+
+interface PropertiesParser {
+  patterns: {[type: string]: RegExp}
+  entryIds: object
+  init: () => void
+  parse: (ctx: any, source: string) => any[]
+  parseEntity: (id: string, value: string, ast: string[]) => void
+  setEntityValue: (
+    id: string,
+    attr: string,
+    key: string,
+    rawValue: string,
+    ast: any[]
+  ) => any
+  parseString: (str: string) => any[]
+  unescapeString: (str: string) => string
+  parseIndex: (str: string) => (string | {t: string; v: string})[]
+}
+
+class L10nHelper {
+  /* 开启了国际化功能的组件 */
+  updateArray: Set<StarBaseElement> = new Set()
+  // TODO: fluent.js 替换完后更改此处
+  l10n: any
+  /* 国际化资源转化器 */
+  PropertiesParser?: PropertiesParser
+  suspending: Function[] = []
+  constructor() {
+    this.init()
+  }
+
+  init = (): void => {
+    // @ts-ignore
+    const l10n = navigator.mozL10n
+    if (!l10n) {
+      return document.addEventListener('readystatechange', this.init, {
+        once: true,
+      })
+    }
+    this.l10n = l10n
+
+    /* 变更语言时, 刷新组件 */
+    window.addEventListener('languagechange', () => {
+      this.updateArray.forEach((element) => element.requestUpdate())
+    })
+
+    if (this.suspending.length) {
+      this.suspending.forEach((fun) => fun())
+    }
+
+    this.loadAllLocales()
+  }
+
+  /* 空闲时加载所有国际化资源, 防止语言切换时闪烁 */
+  loadAllLocales = () => {
+    requestIdleCallback(() => {
+      const availableLocales: string[] = this.l10n.ctx.availableLocales
+      const shouldRequest: string[] = []
+      availableLocales.forEach((lang) => {
+        const locale = this.l10n.ctx.getLocale(lang)
+        if (!locale.isReady) {
+          shouldRequest.push(lang)
+        }
+      })
+
+      shouldRequest.length && this.l10n.ctx.requestLocales(...shouldRequest)
+    })
+  }
+
+  observe = (el: StarBaseElement) => {
+    this.updateArray.add(el)
+  }
+
+  unobserve = (el: StarBaseElement) => {
+    this.updateArray.delete(el)
+  }
+
+  /* 添加国际化资源 */
+  addLocaleSrc = (json: {[lang: string]: {[l10nId: string]: string}}): void => {
+    if (!this.l10n || !this.l10n.ctx.isReady) {
+      this.suspending.push(this.addLocaleSrc.bind(this, json))
+      return
+    }
+    this.initParser().then(() => {
+      for (const language in json) {
+        const context = json[language]
+        const ast = this.parse(context)
+        const locale = this.l10n.ctx.getLocale(language)
+        locale.addAST(ast)
+      }
+    })
+  }
+
+  /* 初始化转化器 */
+  initParser = () => {
+    if (this.l10n.ctx.isReady && this.PropertiesParser) {
+      return Promise.resolve()
+    }
+
+    return new Promise((res) => {
+      this.l10n.once(() => {
+        this.PropertiesParser = this.l10n._getInternalAPI()
+          .PropertiesParser as PropertiesParser
+        this.PropertiesParser.init()
+        res(void 0)
+      })
+    })
+  }
+
+  parse = (context: {[l10nId: string]: string}) => {
+    let str = ''
+    for (const key in context) {
+      const value = context[key]
+      str += `${key}=${value}\n`
+    }
+
+    return this.PropertiesParser!.parse(null, str)
+  }
+
+  get = (id: string, ctxdata: any) => {
+    let result = ''
+
+    if (this.l10n) {
+      if (this.l10n.ctx.isReady) {
+        // 如果L10n已经准备好, 则获取对应国际化结果
+        if (this.l10n.ctx.getLocale(navigator.language).isReady) {
+          result = this.l10n.get(id, ctxdata)
+          if (!result) {
+            console.warn(
+              'l10n get nothing by id:',
+              id,
+              '; and ctxdata:',
+              ctxdata
+            )
+          }
+        } else {
+          // 相应的国际化资源未准备完成, 待完成后重新刷新
+          this.openLocaleListener()
+        }
+      } else {
+        // L10n还没有准备好, 等待L10n准备完毕后, 刷新小组件
+        this.openL10nReadyListener()
+      }
+    } else {
+      console.warn('l10n is not exist!')
+    }
+
+    return result
+  }
+
+  /* 等待国际化资源加载, 添加加载成功的事件监听 */
+  _localeListening: boolean = false
+  openLocaleListener = () => {
+    if (!this._localeListening) {
+      this._localeListening = true
+      const cb = () => {
+        this.updateArray.forEach((el) => el.requestUpdate())
+        this.l10n.ctx.removeEventListener('request-locales-done', cb)
+        this._localeListening = false
+      }
+      this.l10n.ctx.addEventListener('request-locales-done', cb)
+    }
+  }
+
+  /* 等待L10n准备完毕, 添加准备完毕的事件监听 */
+  _readyListening: boolean = false
+  openL10nReadyListener = () => {
+    if (!this._readyListening) {
+      this._readyListening = true
+      this.l10n.once(() => {
+        this.updateArray.forEach((el) => el.requestUpdate())
+        this._readyListening = false
+      })
+    }
+  }
+}
+
+export const l10nHelper = new L10nHelper()
diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts
index 4bd62c5..adbd215 100644
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@@ -5,6 +5,7 @@ import GestureDetector, {
 } from '../../lib/gesture/gesture-detector'
 import {autoPxStyle} from './auto-px-style'
 import {globalStyles} from './global-style'
+import {l10nHelper} from './custome_element_l10n'
 
 declare global {
   var loadStarMixin: boolean
@@ -113,6 +114,16 @@ export type StarElementEventMap = HTMLElementEventMap & GestureEvents
 export class StarBaseElement extends StarMixin(LitElement) {
   gestureDetector!: GestureDetector
 
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this._l10n && l10nHelper.observe(this)
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    this._l10n && l10nHelper.unobserve(this)
+  }
+
   /**
    * 启动手势监听框架
    */
@@ -126,6 +137,35 @@ export class StarBaseElement extends StarMixin(LitElement) {
     GestureDetector.disembedded(this)
   }
 
+  /**
+   * 动态添加国际化资源
+   */
+  addLocaleSrc(json: {[lang: string]: {[l10nId: string]: string}}): void {
+    l10nHelper.addLocaleSrc(json)
+  }
+
+  /* 该组件是否启用了国际化功能, 用于判断是否因系统语言变化而刷新 */
+  _languageChangeObserve: boolean = false
+  get _l10n() {
+    return this._languageChangeObserve
+  }
+
+  set _l10n(value) {
+    if (value) {
+      if (!this._languageChangeObserve) {
+        l10nHelper.observe(this)
+      }
+    } else {
+      l10nHelper.unobserve(this)
+    }
+    this._languageChangeObserve = value
+  }
+  /* 根据 id 和传值 ctxdata 获取国际化结果 */
+  $l = (id: string, ctxdata?: string) => {
+    this._l10n = true
+    return l10nHelper.get(id, ctxdata)
+  }
+
   public static get styles(): CSSResultArray {
     return []
   }
@@ -134,4 +174,4 @@ export class StarBaseElement extends StarMixin(LitElement) {
 export * from 'lit'
 export * from 'lit/decorators.js'
 export * from 'lit/directives/if-defined.js'
-export * from 'lit-html/directives/style-map.js'
+export * from 'lit/directives/style-map.js'
diff --git a/src/components/base/tsconfig.json b/src/components/base/tsconfig.json
index f38e3f9..8b6101d 100644
--- a/src/components/base/tsconfig.json
+++ b/src/components/base/tsconfig.json
@@ -4,5 +4,9 @@
     "composite": true,
     "rootDir": "../../"
   },
-  "include": ["*.ts", "../../lib/gesture/gesture-detector.ts"]
+  "include": [
+    "*.ts",
+    "../../lib/gesture/gesture-detector.ts",
+    "../../../../typings/"
+  ]
 }
diff --git a/src/components/battery-square/battery-square-styles.ts b/src/components/battery-square/battery-square-styles.ts
index b5f1436..827301d 100644
--- a/src/components/battery-square/battery-square-styles.ts
+++ b/src/components/battery-square/battery-square-styles.ts
@@ -1,11 +1,10 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
-  .power {
+  :host {
     position: relative;
     width: 100%;
-    height: 0;
-    padding: 0;
-    padding-bottom: 100%;
+    height: 100%;
+    display: block;
   }
 
   .container {
@@ -36,10 +35,10 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     font-style: normal;
     font-weight: 400;
-    font-size: 9vw;
+    font-size: var(--percent-size);
     color: #717171;
     padding-inline-start: 25%;
-    padding-top: 2.5%;
+    padding-block-start: 2.5%;
   }
 
   .lightning {
diff --git a/src/components/battery-square/battery-square.ts b/src/components/battery-square/battery-square.ts
index dbf2f0c..37523e7 100644
--- a/src/components/battery-square/battery-square.ts
+++ b/src/components/battery-square/battery-square.ts
@@ -18,6 +18,8 @@ export class StarBatterysquare extends LitElement {
 
   @query('.canvas') _canvas: any
 
+  @query('.container') _container: any
+
   drawcircle() {
     const canvas = this._canvas
     const can = canvas.getContext('2d')
@@ -57,19 +59,28 @@ export class StarBatterysquare extends LitElement {
     can.closePath()
   }
 
+  protected resize() {
+    var width = this._container.clientWidth
+    console.log(width)
+    this.style.setProperty('--percent-size', width / 10 + 'px')
+  }
+
+
   protected firstUpdated(): void {
     this.drawcircle()
     this.drawarc()
+    this.resize()
+    window.addEventListener('resize', () => {
+      this.resize()
+    })
   }
 
   render() {
     return html`
-      <div class="power">
-        <div class="container">
-          <canvas class="canvas" width="160px" height="160px"></canvas>
-          <img src="src/assets/lightning.svg" class="lightning" />
-          <span class="percent">%</span>
-        </div>
+      <div class="container">
+        <canvas class="canvas" width="160px" height="160px"></canvas>
+        <img src="src/assets/lightning.svg" class="lightning" />
+        <span class="percent">%</span>
       </div>
     `
   }
diff --git a/src/components/battery/battery-styles.ts b/src/components/battery/battery-styles.ts
index 7cecb8b..64a425c 100644
--- a/src/components/battery/battery-styles.ts
+++ b/src/components/battery/battery-styles.ts
@@ -1,12 +1,11 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
-  // .holder {
-  //   position: relative;
-  //   width: var(--battery-width, 100%);
-  //   height: 0;
-  //   padding: 0;
-  //   padding-bottom: 35.4%;
-  // }
+  :host {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
 
   .container {
     display: flex;
diff --git a/src/components/clock/clock-style.ts b/src/components/clock/clock-style.ts
index da49d89..38d607f 100644
--- a/src/components/clock/clock-style.ts
+++ b/src/components/clock/clock-style.ts
@@ -1,4 +1,19 @@
-import {css, CSSResult} from 'lit'
+import {css, CSSResult,unsafeCSS} from 'lit'
+const darkHour = unsafeCSS(
+  new URL('./svg/dark_hour.svg', import.meta.url).href
+)
+const darkMinute = unsafeCSS(
+  new URL('./svg/dark_minute.svg', import.meta.url).href
+)
+const lightHour = unsafeCSS(
+  new URL('./svg/light_hour.svg', import.meta.url).href
+)
+const lightMinute = unsafeCSS(
+  new URL('./svg/light_minute.svg', import.meta.url).href
+)
+const sharedSecond = unsafeCSS(
+  new URL('./svg/second.svg', import.meta.url).href
+)
 export const sharedStyles: CSSResult = css`
   @media (prefers-color-scheme: light) {
     :host {
@@ -17,13 +32,13 @@ export const sharedStyles: CSSResult = css`
       --back-clock-backdrop-filter: blur(20px);
     }
     .star-clock-hour-hand {
-      background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
+      background: url(${lightHour}) no-repeat;
     }
     .star-clock-minute-hand {
-      background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
+      background: url(${lightMinute}) no-repeat;
     }
     .star-clock-second-hand {
-      background: url('./src/components/clock/svg/second.svg') no-repeat;
+      background: url(${sharedSecond}) no-repeat;
     }
   }
   @media (prefers-color-scheme: dark) {
@@ -42,13 +57,13 @@ export const sharedStyles: CSSResult = css`
       --back-clock-backdrop-filter: blur(20.3871px);
     }
     .star-clock-hour-hand {
-      background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
+      background: url(${darkHour}) no-repeat;
     }
     .star-clock-minute-hand {
-      background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
+      background: url(${darkMinute}) no-repeat;
     }
     .star-clock-second-hand {
-      background: url('./src/components/clock/svg/second.svg') no-repeat;
+      background: url(${sharedSecond}) no-repeat;
     }
   }
   * {
diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts
index 8df4c95..045a37a 100644
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@@ -1608,6 +1608,13 @@ export class GaiaContainer extends StarBaseElement {
             composed: true,
           })
         )
+      } else if (this._dnd.isSpanning) {
+        this.dispatchEvent(
+          new CustomEvent('cross-field', {
+            detail: child,
+            composed: true,
+          })
+        )
       }
     }
 
diff --git a/src/components/grid-container/element-exchange-strategy.ts b/src/components/grid-container/element-exchange-strategy.ts
index a337c82..404e328 100644
--- a/src/components/grid-container/element-exchange-strategy.ts
+++ b/src/components/grid-container/element-exchange-strategy.ts
@@ -19,6 +19,13 @@ type PlacedRecorder = {
  * 7. 为满足规则5，规则6的寻位方向变化以顺时针方向转变，如：上左 → 上右 → 下右 → 下左
  * 8. 图标节点被另一个图标节点挤占位置时，仅能再去挤占相邻网格的图标的位置（即不允许挤占上下相邻图标）
  * 9. TODO: 图标被小组件挤压后,优先考虑集体移动到组件的相同的某一个方向上
+ * 10. TODO: 被挤占位置时, 比起就近原则再去挤占其他组件或图标的位置, 应优先寻找可放置的空白位置
+ *
+ * 核心准则:
+ * 1. TODO: 应尽量保证用户放置图标、小组件、应用文件夹的页面、位置不被扰乱
+ * 2. 因拖拽、放置的自由度很高, 应尽量降低用户对一次误操作或者一次不满意操作的纠错成本
+ * 3. TODO: 非必要不应挪动其他与本次换位无关的元素的位置
+ * 4. 除非被主动拖拽, 元素不允许任何跨页放置行为(很明显地, 进行一次跨页操作所需要的时间成本和操作成本远大于页内操作)
  */
 
 enum Directions {
diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts
index ccdcf4a..760839a 100644
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@@ -65,6 +65,8 @@ export default class GaiaContainerChild {
   _order: number = -1
   // 用于记录将会与其进行交换的占位DOM
   _switch?: HTMLElement
+  // 越界标志
+  breakout: boolean = false
 
   constructor(
     element: HTMLElement = document.createElement('div'),
@@ -453,7 +455,15 @@ export default class GaiaContainerChild {
       this._lastElementHeight = this.element?.offsetHeight!
     }
 
+    const crossResult = this.manager.exchangeStratege.handleCrossField(
+      this.curGridId,
+      this
+    )
+
+    this.breakout = crossResult.bottom || crossResult.right
+
     !isActive &&
+      !this.breakout &&
       !this.container.classList.contains('dragging') &&
       (container.style.transform = 'translate(' + left + 'px, ' + top + 'px)')
     return true
diff --git a/src/components/icon-added-container/added-container-child.ts b/src/components/icon-added-container/added-container-child.ts
new file mode 100644
index 0000000..3a7543b
--- /dev/null
+++ b/src/components/icon-added-container/added-container-child.ts
@@ -0,0 +1,114 @@
+export default class AddedContainerChild {
+  _element: HTMLElement | null
+  _container: HTMLElement | null = null
+  _master: HTMLElement | null = null
+  _lastElementWidth: number | null = null
+  _lastElementHeight: number | null = null
+  _lastElementDisplay: string | null = null
+  _lastElementOrder: string | null = null
+  _lastMasterTop: number | null = null
+  _lastMasterLeft: number | null = null
+  // 状态计时器
+  removed: number | undefined = undefined
+  added: number | undefined = undefined
+
+  constructor(element: HTMLElement | null) {
+    this._element = element
+    this.markDirty()
+  }
+
+  get element() {
+    return this._element
+  }
+
+  /**
+   * The element that will contain the child element and control its position.
+   */
+  get container() {
+    if (!this._container) {
+      // Create container
+      let container = document.createElement('div')
+      container.classList.add('gaia-container-child')
+      container.style.position = 'absolute'
+      container.style.top = '0'
+      container.style.left = '0'
+      container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
+
+      this._container = container
+    }
+    return this._container
+  }
+
+  /**
+   * The element that will be added to the container that will
+   * control the element's transform.
+   */
+  get master() {
+    if (!this._master) {
+      // Create master
+      let master = document.createElement('div')
+      master.style.visibility = 'hidden'
+      this._master = master
+    }
+    return this._master
+  }
+
+  /**
+   * Clears any cached style properties. To be used if elements are
+   * manipulated outside of the methods of this object.
+   */
+  markDirty() {
+    this._lastElementWidth = null
+    this._lastElementHeight = null
+    this._lastElementDisplay = null
+    this._lastElementOrder = null
+    this._lastMasterTop = null
+    this._lastMasterLeft = null
+  }
+
+  /**
+   * Synchronise the size of the master with the managed child element.
+   */
+  synchroniseMaster() {
+    let master = this.master
+    let element = this.element
+
+    let style = window.getComputedStyle(element as HTMLElement)
+    let display = style.display
+    let order = style.order
+    let width = (element as HTMLElement).offsetWidth
+    let height = (element as HTMLElement).offsetHeight
+
+    if (
+      this._lastElementWidth !== width ||
+      this._lastElementHeight !== height ||
+      this._lastElementDisplay !== display ||
+      this._lastElementOrder !== order
+    ) {
+      this._lastElementWidth = width
+      this._lastElementHeight = height
+      this._lastElementDisplay = display
+      this._lastElementOrder = order
+
+      master.style.width = width + 'px'
+      master.style.height = height + 'px'
+      master.style.display = display
+      master.style.order = order
+    }
+  }
+
+  /**
+   * Synchronise the container's transform with the position of the master.
+   */
+  synchroniseContainer() {
+    let master = this.master
+    let container = this.container
+    let top = master.offsetTop
+    let left = master.offsetLeft
+    if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
+      this._lastMasterTop = top
+      this._lastMasterLeft = left
+      container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
+    }
+  }
+}
diff --git a/src/components/icon-added-container/icon-added-container.ts b/src/components/icon-added-container/icon-added-container.ts
new file mode 100644
index 0000000..7cffe8b
--- /dev/null
+++ b/src/components/icon-added-container/icon-added-container.ts
@@ -0,0 +1,1146 @@
+import {html, LitElement} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import AddedContainerChild from './added-container-child'
+// import {
+//   DragAndDrop
+// } from '../grid-container/contianer-interface'
+
+/**
+ * The time, in ms, to wait for an animation to start in response to a state
+ * change, before removing the associated style class.
+ */
+const STATE_CHANGE_TIMEOUT = 100
+
+/**
+ * The time, in ms, to wait before initiating a drag-and-drop from a
+ * long-press.
+ */
+const DEFAULT_DND_TIMEOUT = 300
+
+/**
+ * The distance, in CSS pixels, in which a touch or mouse point can deviate
+ * before it being discarded for initiation of a drag-and-drop action.
+ */
+const DND_THRESHOLD = 5
+
+/**
+ * The minimum time between sending move events during drag-and-drop.
+ */
+const DND_MOVE_THROTTLE = 50
+interface ClickInfo {
+  pageX: number
+  pageY: number
+  clientX: number
+  clientY: number
+}
+
+interface lastClickInfo extends ClickInfo {
+  timeStamp: number
+}
+
+interface DragAndDrop {
+  // Whether drag-and-drop is enabled
+  enabled: boolean
+
+  // The time, in ms, to wait before initiating a drag-and-drop from a
+  // long-press
+  delay: number
+
+  // Timeout used to initiate drag-and-drop actions
+  timeout: NodeJS.Timeout
+
+  // The child that was tapped/clicked
+  child: any
+
+  // Whether a drag is active
+  active: boolean
+
+  // The start point of the drag action
+  start: ClickInfo
+
+  // The last point of the drag action
+  last: lastClickInfo
+
+  // Timeout used to send drag-move events
+  moveTimeout: NodeJS.Timeout
+
+  // The last time a move event was fired
+  lastMoveEventTime: number
+
+  // Whether to capture the next click event
+  clickCapture: boolean
+
+  center: {
+    x: number
+    y: number
+  }
+
+  // 定位坐标
+  gridPosition: {
+    x: number
+    y: number
+  }
+}
+
+@customElement('icon-added-container')
+export class IconAddedContainer extends LitElement {
+  _frozen: boolean = false
+  _pendingStateChanges: Function[] = []
+  _children: AddedContainerChild[] = []
+  _dnd: DragAndDrop = {
+    // Whether drag-and-drop is enabled
+    enabled: false,
+
+    // The time, in ms, to wait before initiating a drag-and-drop from a
+    // long-press
+    delay: DEFAULT_DND_TIMEOUT,
+
+    // Timeout used to initiate drag-and-drop actions
+    timeout: null as any,
+
+    // The child that was tapped/clicked
+    child: null,
+
+    // Whether a drag is active
+    active: false,
+
+    // The start point of the drag action
+    start: {
+      pageX: 0,
+      pageY: 0,
+      clientX: 0,
+      clientY: 0,
+    },
+
+    // The last point of the drag action
+    last: {
+      pageX: 0,
+      pageY: 0,
+      clientX: 0,
+      clientY: 0,
+      timeStamp: 0,
+    },
+
+    center: {
+      x: 0,
+      y: 0,
+    },
+
+    // 定位坐标
+    gridPosition: {
+      x: 0,
+      y: 0,
+    },
+    // Timeout used to send drag-move events
+    moveTimeout: null as any,
+
+    // The last time a move event was fired
+    lastMoveEventTime: 0,
+
+    // Whether to capture the next click event
+    clickCapture: false,
+  }
+  height: number = 0
+  width: number = 0
+  top: number = 0
+  left: number = 0
+  bottom: number = 0
+  right: number = 0
+  dndObserver: MutationObserver | null = null
+
+  @property({type: String}) id = ''
+  @property({type: Boolean}) isunadd = false
+
+  firstUpdated() {
+    let {width, height, top, right, bottom, left} = this.getBoundingClientRect()
+    this.height = height
+    this.width = width
+    this.top = top
+    this.left = left
+    this.bottom = bottom
+    this.right = right
+    let dndObserverCallback = () => {
+      if (this._dnd.enabled !== this.dragAndDrop) {
+        this._dnd.enabled = this.dragAndDrop
+        if (this._dnd.enabled) {
+          this.addEventListener('touchstart', this)
+          this.addEventListener('touchmove', this)
+          this.addEventListener('touchcancel', this)
+          this.addEventListener('touchend', this)
+          // this.addEventListener("mousedown", this);
+          // this.addEventListener("mousemove", this);
+          // this.addEventListener("mouseup", this);
+          this.addEventListener('click', this, true)
+          this.addEventListener('contextmenu', this, true)
+        } else {
+          this.cancelDrag()
+          this.removeEventListener('touchstart', this)
+          this.removeEventListener('touchmove', this)
+          this.removeEventListener('touchcancel', this)
+          this.removeEventListener('touchend', this)
+          // this.removeEventListener("mousedown", this);
+          // this.removeEventListener("mousemove", this);
+          // this.removeEventListener("mouseup", this);
+          this.removeEventListener('click', this, true)
+          this.removeEventListener('contextmenu', this, true)
+        }
+      }
+    }
+    this.dndObserver = new MutationObserver(dndObserverCallback)
+    this.dndObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ['drag-and-drop'],
+    })
+
+    dndObserverCallback()
+    window.addEventListener('resize', () => {
+      this.firstUpdated()
+    })
+  }
+
+  get elements() {
+    //div.icon-container
+    return this._children.map((child) => {
+      return child.element
+    })
+  }
+
+  get firstChild() {
+    return this._children.length ? this._children[0].element : null
+  }
+
+  get lastChild() {
+    const length = this._children.length
+    return length ? this._children[length - 1].element : null
+  }
+
+  get dragAndDrop() {
+    return this.getAttribute('drag-and-drop') !== null
+  }
+
+  get dragAndDropTimeout() {
+    return this._dnd.delay
+  }
+
+  set dragAndDropTimeout(timeout) {
+    if (timeout >= 0) {
+      this._dnd.delay = timeout
+    } else {
+      this._dnd.delay = DEFAULT_DND_TIMEOUT
+    }
+  }
+
+  getChildByElement(element: HTMLElement) {
+    let children = [...this._children]
+    for (const child of children) {
+      if (
+        child._element === element ||
+        child.master === element ||
+        child.container === element
+      ) {
+        return child
+      }
+    }
+
+    return null
+  }
+
+  realAppendChild(element: HTMLElement) {
+    let proto = HTMLElement.prototype.appendChild
+    let func = proto.call(this, element)
+    return func
+  }
+
+  realRemoveChild(element: HTMLElement) {
+    let proto = HTMLElement.prototype.removeChild
+    let func = proto.call(this, element)
+    return func
+  }
+
+  realInsertBefore(...args: [HTMLElement, HTMLElement]) {
+    let proto = HTMLElement.prototype.insertBefore
+    let func = proto.apply(this, args)
+    return func
+  }
+
+  realReplaceChild(...args: [HTMLElement, HTMLElement]) {
+    let proto = HTMLElement.prototype.replaceChild
+    let func = proto.apply(this, args)
+    return func
+  }
+
+  appendContainerChild(element: HTMLElement, callback: Function) {
+    this.insertContainerBefore(element, null, callback)
+  }
+
+  clearAll() {
+    this.elements.forEach((el) => {
+      this.removeContainerChild(el as HTMLElement)
+    })
+  }
+
+  removeContainerChild(element: HTMLElement, callback?: Function) {
+    let children = this._children
+    let childToRemove: AddedContainerChild | null = null
+
+    for (let child of children) {
+      if (child.element === element) {
+        childToRemove = child
+        break
+      }
+    }
+
+    if (childToRemove === null) {
+      throw 'removeChild called on unknown child'
+    }
+
+    this.changeState(childToRemove, 'removed', () => {
+      this.realRemoveChild((childToRemove as AddedContainerChild).container)
+      this.realRemoveChild((childToRemove as AddedContainerChild).master)
+
+      // Find the child again. We need to do this in case the container was
+      // manipulated between removing the child and this callback being reached.
+      for (let i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i] === childToRemove) {
+          children.splice(i, 1)
+          break
+        }
+      }
+
+      if (callback) {
+        callback()
+      }
+
+      this.synchronise()
+    })
+  }
+
+  replaceContainerChild(
+    newElement: HTMLElement,
+    oldElement: HTMLElement,
+    callback: Function
+  ) {
+    if (!newElement || !oldElement) {
+      throw 'replaceChild called with null arguments'
+    }
+
+    // Unparent the newElement if necessary (with support for gaia-container)
+    if (newElement.parentNode) {
+      this.removeContainerChild(newElement, () => {
+        this.replaceContainerChild(newElement, oldElement, callback)
+      })
+      if (newElement.parentNode) {
+        return
+      }
+    }
+
+    // Remove the old child and add the new one, but don't run the removed/
+    // added state changes.
+    let children = this._children
+
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let oldChild = children[i]
+      if (oldChild.element === oldElement) {
+        let newChild = new AddedContainerChild(newElement)
+        this.realInsertBefore(newChild.container, oldChild.container)
+        this.realInsertBefore(newChild.master, oldChild.master)
+        this.realRemoveChild(oldChild.container)
+        this.realRemoveChild(oldChild.master)
+        this._children.splice(i, 1, newChild)
+        this.synchronise()
+
+        if (callback) {
+          callback()
+        }
+        return
+      }
+    }
+
+    throw 'removeChild called on unknown child'
+  }
+
+  /**
+   * Reorders the given element to appear before referenceElement.
+   */
+  reorderChild(
+    element: HTMLElement,
+    referenceElement: HTMLElement,
+    callback: Function
+  ) {
+    if (!element) {
+      throw 'reorderChild called with null element'
+    }
+
+    let children = this._children
+    let child = null
+    let childIndex = null
+    let referenceChild = null
+    let referenceChildIndex = null
+
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      if (children[i].element === element) {
+        child = children[i]
+        childIndex = i
+      } else if (children[i].element === referenceElement) {
+        referenceChild = children[i]
+        referenceChildIndex = i
+      }
+
+      if (child && (referenceChild || !referenceElement)) {
+        this.realRemoveChild(child.container)
+        this.realRemoveChild(child.master)
+        children.splice(childIndex as number, 1)
+
+        if (referenceChild) {
+          this.realInsertBefore(child.container, referenceChild.container)
+          this.realInsertBefore(child.master, referenceChild.master)
+        } else {
+          children.length === 0
+            ? this.realAppendChild(child.container)
+            : this.realInsertBefore(child.container, children[0].master)
+          this.realAppendChild(child.master)
+        }
+
+        referenceChild
+          ? children.splice(
+              (referenceChildIndex as number) -
+                ((childIndex as number) < (referenceChildIndex as number)
+                  ? 1
+                  : 0),
+              0,
+              child
+            )
+          : children.splice(children.length, 0, child)
+
+        this.synchronise()
+
+        if (callback) {
+          callback()
+        }
+        return
+      }
+    }
+
+    throw child
+      ? 'reorderChild called on unknown reference element'
+      : 'reorderChild called on unknown child'
+  }
+
+  insertContainerBefore(
+    element: HTMLElement,
+    reference: HTMLElement | null,
+    callback: Function
+  ) {
+    let children = this._children
+    let childToInsert = new AddedContainerChild(element)
+    let referenceIndex = -1
+
+    if (reference !== null) {
+      for (let i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i].element === reference) {
+          referenceIndex = i
+          break
+        }
+      }
+      if (referenceIndex === -1) {
+        throw 'insertBefore called on unknown child'
+      }
+    }
+
+    if (referenceIndex === -1) {
+      children.length === 0
+        ? this.realAppendChild(childToInsert.container)
+        : this.realInsertBefore(childToInsert.container, children[0].master)
+      this.realAppendChild(childToInsert.master)
+      children.push(childToInsert)
+    } else {
+      this.realInsertBefore(
+        childToInsert.container,
+        children[referenceIndex].container
+      )
+      this.realInsertBefore(
+        childToInsert.master,
+        children[referenceIndex].master
+      )
+      children.splice(referenceIndex, 0, childToInsert)
+    }
+
+    this.changeState(childToInsert, 'added', callback)
+    this.synchronise()
+  }
+
+  /**
+   * Used to execute a state-change of a child that may possibly be animated.
+   * @state will be added to the child's class-list. If an animation starts that
+   * has the same name, that animation will complete and @callback will be
+   * called. Otherwise, the class will be removed and @callback called on the
+   * next frame.
+   */
+  changeState(
+    child: AddedContainerChild,
+    state: 'added' | 'removed',
+    callback: Function
+  ) {
+    // Check that the child is still attached to this parent (can happen if
+    // the child is removed while frozen).
+    if ((child.container as any).parentNode !== this) {
+      return
+    }
+
+    // Check for a redundant state change.
+    if (child.container.classList.contains(state)) {
+      return
+    }
+
+    // Queue up state change if we're frozen.
+    if (this._frozen) {
+      this._pendingStateChanges.push(
+        this.changeState.bind(this, child, state, callback)
+      )
+      return
+    }
+
+    let animStart = (e: AnimationEvent) => {
+      if (!e.animationName.endsWith(state)) {
+        return
+      }
+
+      child.container.removeEventListener('animationstart', animStart)
+
+      window.clearTimeout(child[state])
+      delete child[state]
+
+      // let self = this;
+      child.container.addEventListener('animationend', function animEnd() {
+        child.container.removeEventListener('animationend', animEnd)
+        child.container.classList.remove(state)
+        if (callback) {
+          callback()
+        }
+      })
+    }
+
+    child.container.addEventListener('animationstart', animStart)
+    child.container.classList.add(state)
+
+    child[state] = window.setTimeout(() => {
+      delete child[state]
+      child.container.removeEventListener('animationstart', animStart)
+      child.container.classList.remove(state)
+      if (callback) {
+        callback()
+      }
+    }, STATE_CHANGE_TIMEOUT)
+  }
+
+  getChildOffsetRect(element: HTMLElement) {
+    let children = this._children
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let child = children[i]
+      if (child.element === element) {
+        let top = child._lastMasterTop as number
+        let left = child._lastMasterLeft as number
+        let width = child._lastElementWidth as number
+        let height = child._lastElementHeight as number
+
+        return {
+          top: top,
+          left: left,
+          width: width,
+          height: height,
+          right: left + width,
+          bottom: top + height,
+        }
+      }
+    }
+
+    throw 'getChildOffsetRect called on unknown child'
+  }
+
+  getChildFromPoint(x: number, y: number) {
+    let children = this._children
+    for (
+      let parent = this.parentElement;
+      parent;
+      parent = parent.parentElement
+    ) {
+      x += parent.scrollLeft - parent.offsetLeft
+      y += parent.scrollTop - parent.offsetTop
+    }
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let child = children[i]
+      if (
+        x >= (child._lastMasterLeft as number) &&
+        y >= (child._lastMasterTop as number) &&
+        x <
+          (child._lastMasterLeft as number) +
+            (child._lastElementWidth as number) &&
+        y <
+          (child._lastMasterTop as number) +
+            (child._lastElementHeight as number)
+      ) {
+        return child.element
+      }
+    }
+
+    return null
+  }
+
+  cancelDrag() {
+    if (this._dnd.timeout !== null) {
+      clearTimeout(this._dnd.timeout)
+      this._dnd.timeout = null as any
+    }
+
+    if (this._dnd.moveTimeout !== null) {
+      clearTimeout(this._dnd.moveTimeout)
+      this._dnd.moveTimeout = null as any
+    }
+
+    if (this._dnd.active) {
+      this._dnd.child.container.classList.remove('dragging')
+      this._dnd.child.container.style.position = 'absolute'
+      this._dnd.child.container.style.top = '0'
+      this._dnd.child.container.style.left = '0'
+      this._dnd.child.markDirty()
+      this._dnd.child = null
+      this._dnd.active = false
+      this.synchronise()
+      this._dnd.clickCapture = true
+      this.dispatchEvent(new CustomEvent('drag-added-finish', {composed: true}))
+    }
+  }
+
+  startDrag() {
+    const child = this._dnd.child
+    this._dnd.gridPosition.x =
+      child._lastMasterLeft + child.master.offsetWidth / 2
+    this._dnd.gridPosition.y =
+      child._lastMasterTop + child.master.offsetHeight / 2
+
+    this._dnd.center.x = child._lastMasterLeft + child.master.offsetWidth / 2
+    this._dnd.center.y = child._lastMasterTop + child.master.offsetHeight / 2
+    if (
+      !this.dispatchEvent(
+        new CustomEvent('drag-added-start', {
+          cancelable: true,
+          detail: {
+            target: this._dnd.child.element,
+            pageX: this._dnd.start.pageX,
+            pageY: this._dnd.start.pageY,
+            clientX: this._dnd.start.clientX,
+            clientY: this._dnd.start.clientY,
+          },
+          composed: true,
+        })
+      )
+    ) {
+      return
+    }
+
+    this._dnd.active = true
+    this._dnd.child.container.classList.add('dragging')
+    this._dnd.child.container.style.position = 'fixed'
+    let rect = this.getBoundingClientRect()
+    this._dnd.child.container.style.top = rect.top + 'px'
+    this._dnd.child.container.style.left = rect.left + 'px'
+  }
+
+  continueDrag() {
+    if (!this._dnd.active) {
+      return
+    }
+
+    let left =
+      this._dnd.child.master.offsetLeft +
+      (this._dnd.last.pageX - this._dnd.start.pageX)
+    let top =
+      this._dnd.child.master.offsetTop +
+      (this._dnd.last.pageY - this._dnd.start.pageY)
+    this._dnd.child.container.style.transform =
+      'translate(' + left + 'px, ' + top + 'px)'
+
+    if (this._dnd.moveTimeout === null) {
+      let delay = Math.max(
+        0,
+        DND_MOVE_THROTTLE -
+          (this._dnd.last.timeStamp - this._dnd.lastMoveEventTime)
+      )
+      this._dnd.moveTimeout = setTimeout(() => {
+        this._dnd.moveTimeout = null as any
+        this._dnd.lastMoveEventTime = this._dnd.last.timeStamp
+        this.dispatchEvent(
+          new CustomEvent('drag-added-move', {
+            detail: {
+              target: this._dnd.child.element,
+              pageX: this._dnd.last.pageX,
+              pageY: this._dnd.last.pageY,
+              clientX: this._dnd.last.clientX,
+              clientY: this._dnd.last.clientY,
+            },
+            composed: true,
+          })
+        )
+      }, delay)
+    }
+  }
+
+  endDrag(event: Event) {
+    if (this._dnd.active) {
+      const centerX =
+        this.left +
+        this._dnd.center.x +
+        (this._dnd.last.pageX - this._dnd.start.pageX)
+      const centerY =
+        this.top +
+        this._dnd.center.y +
+        (this._dnd.last.pageY - this._dnd.start.pageY)
+      const elementHeight = this._dnd.child.element.offsetHeight
+      const elementWidth = this._dnd.child.element.offsetWidth
+      let dropTarget = this.getChildFromPoint(
+        this._dnd.last.clientX,
+        this._dnd.last.clientY
+      )
+
+      if (
+        this.dispatchEvent(
+          new CustomEvent('drag-added-end', {
+            cancelable: true,
+            detail: {
+              target: this._dnd.child.element,
+              dropTarget: dropTarget,
+              pageX: this._dnd.last.pageX,
+              pageY: this._dnd.last.pageY,
+              clientX: this._dnd.last.clientX,
+              clientY: this._dnd.last.clientY,
+              centerX,
+              centerY,
+              gridHeight: elementHeight,
+              gridWidth: elementWidth,
+            },
+            composed: true,
+          })
+        )
+      ) {
+        let children = this._children
+
+        if (dropTarget && dropTarget !== this._dnd.child.element) {
+          let dropChild: AddedContainerChild | null = null
+          let dropIndex = -1
+          let childIndex = -1
+          let insertBefore = true
+          for (let i = 0, iLen = children.length; i < iLen; i++) {
+            if (children[i] === this._dnd.child) {
+              childIndex = i
+              if (!dropChild) {
+                insertBefore = false
+              }
+            }
+
+            if (children[i].element === dropTarget) {
+              dropChild = children[i]
+              dropIndex = i
+            }
+
+            if (dropIndex >= 0 && childIndex >= 0) {
+              break
+            }
+          }
+
+          if (dropIndex >= 0 && childIndex >= 0) {
+            // Default action, rearrange the dragged child to before or after
+            // the child underneath the touch/mouse point.
+            this.realRemoveChild(this._dnd.child.container)
+            this.realRemoveChild(this._dnd.child.master)
+            this.realInsertBefore(
+              this._dnd.child.container,
+              insertBefore
+                ? ((dropChild as AddedContainerChild).container as any)
+                : (dropChild as AddedContainerChild).container.nextSibling
+            )
+            this.realInsertBefore(
+              this._dnd.child.master,
+              insertBefore
+                ? ((dropChild as AddedContainerChild).master as any)
+                : (dropChild as AddedContainerChild).master.nextSibling
+            )
+            children.splice(dropIndex, 0, children.splice(childIndex, 1)[0])
+            this.dispatchEvent(
+              new CustomEvent('drag-added-rearrange', {composed: true})
+            )
+          }
+        }
+      }
+    } else if (this._dnd.timeout !== null) {
+      let handled = !this.dispatchEvent(
+        new CustomEvent('added-activate', {
+          cancelable: true,
+          composed: true,
+          detail: {
+            target: this._dnd.child.element,
+          },
+        })
+      )
+      if (handled) {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+      }
+    }
+
+    this.cancelDrag()
+  }
+
+  // 节流阀
+  throttle: number | undefined = undefined
+  // 拖拽节点所处位置
+  dragPosition: 'inner' | 'outter' = 'inner'
+  handleEvent(event: Event) {
+    switch (event.type) {
+      case 'touchstart':
+      case 'mousedown':
+        if (this._dnd.active || this._dnd.timeout) {
+          // this.cancelDrag()
+          // break
+        }
+
+        if (event instanceof MouseEvent) {
+          this._dnd.start.pageX = event.pageX
+          this._dnd.start.pageY = event.pageY
+          this._dnd.start.clientX = event.clientX
+          this._dnd.start.clientY = event.clientY
+        } else {
+          this._dnd.start.pageX = (event as TouchEvent).touches[0].pageX
+          this._dnd.start.pageY = (event as TouchEvent).touches[0].pageY
+          this._dnd.start.clientX = (event as TouchEvent).touches[0].clientX
+          this._dnd.start.clientY = (event as TouchEvent).touches[0].clientY
+        }
+
+        this._dnd.last.pageX = this._dnd.start.pageX
+        this._dnd.last.pageY = this._dnd.start.pageY
+        this._dnd.last.clientX = this._dnd.start.clientX
+        this._dnd.last.clientY = this._dnd.start.clientY
+        this._dnd.last.timeStamp = event.timeStamp
+
+        let target = event.target as any //gaia-app-icon
+
+        for (; target.parentNode !== this; target = target.parentNode) {
+          if (target === this || !target.parentNode) {
+            return
+          }
+        }
+
+        // Find the child
+        let children = this._children
+        for (let child of children) {
+          if (child.container === target) {
+            this._dnd.child = child
+            break
+          }
+        }
+
+        if (!this._dnd.child) {
+          return
+        }
+
+        if (this._dnd.delay > 0) {
+          this._dnd.timeout = setTimeout(() => {
+            this._dnd.timeout = null as any
+            this.startDrag()
+          }, this._dnd.delay)
+        } else {
+          this.startDrag()
+        }
+        break
+
+      case 'touchmove':
+      case 'mousemove':
+        // event.preventDefault();
+        // event.stopPropagation();
+        let pageX, pageY, clientX, clientY
+        if (event instanceof MouseEvent) {
+          pageX = event.pageX
+          pageY = event.pageY
+          clientX = event.clientX
+          clientY = event.clientY
+        } else {
+          pageX = (event as TouchEvent).touches[0].pageX
+          pageY = (event as TouchEvent).touches[0].pageY
+          clientX = (event as TouchEvent).touches[0].clientX
+          clientY = (event as TouchEvent).touches[0].clientY
+        }
+
+        if (this._dnd.timeout) {
+          if (
+            Math.abs((pageX as number) - this._dnd.start.pageX) >
+              DND_THRESHOLD ||
+            Math.abs((pageY as number) - this._dnd.start.pageY) > DND_THRESHOLD
+          ) {
+            clearTimeout(this._dnd.timeout)
+            this._dnd.timeout = null as any
+          }
+        } else if (this._dnd.active) {
+          event.preventDefault()
+          this._dnd.last.pageX = pageX as number
+          this._dnd.last.pageY = pageY as number
+          this._dnd.last.clientX = clientX as number
+          this._dnd.last.clientY = clientY as number
+          this._dnd.last.timeStamp = event.timeStamp
+
+          this.continueDrag()
+        }
+
+        const centerX =
+          this._dnd.center.x +
+          (this._dnd.last.pageX - this._dnd.start.pageX) +
+          this.left
+        const centerY =
+          this._dnd.center.y +
+          (this._dnd.last.pageY - this._dnd.start.pageY) +
+          this.top
+        const elementHeight = this._dnd.child.element.offsetHeight
+        const elementWidth = this._dnd.child.element.offsetWidth
+        if (centerY > this.offsetHeight) {
+          this.dragPosition = 'outter'
+          if (!this.throttle) {
+            this.throttle = window.setTimeout(() => {
+              this.dispatchEvent(
+                new CustomEvent('drag-outside-added-container', {
+                  detail: {
+                    element: this._dnd.child.element,
+                    gridHeight: elementHeight,
+                    gridWidth: elementWidth,
+                    centerX: centerX,
+                    centerY: centerY,
+                  },
+                  composed: true,
+                })
+              )
+
+              this.throttle = undefined
+            }, 100)
+          }
+        } else {
+          if (this.dragPosition == 'outter') {
+            this.dragPosition = 'inner'
+            // this.dispatchEvent(
+            //   new CustomEvent('drag-into-added-container', {
+            //     detail: this._dnd.child.element,
+            //     composed: true,
+            //   })
+            // )
+          }
+          clearTimeout(this.throttle)
+          this.throttle = undefined
+        }
+        break
+
+      case 'touchcancel':
+        this.cancelDrag()
+        break
+
+      case 'touchend':
+      case 'mouseup':
+        if (this._dnd.active) {
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
+        this.endDrag(event)
+        break
+
+      case 'click':
+        if (this._dnd.clickCapture) {
+          this._dnd.clickCapture = false
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
+        break
+
+      case 'contextmenu':
+        if (this._dnd.active || this._dnd.timeout) {
+          event.stopImmediatePropagation()
+          // event.preventDefault();
+        }
+        break
+    }
+  }
+
+  /**
+   * Temporarily disables element position synchronisation. Useful when adding
+   * multiple elements to the container at the same time, or in quick
+   * succession.
+   */
+  freeze() {
+    this._frozen = true
+  }
+
+  /**
+   * Enables element position synchronisation after freeze() has been called.
+   */
+  thaw() {
+    if (this._frozen) {
+      this._frozen = false
+      for (let callback of this._pendingStateChanges) {
+        callback()
+      }
+      this._pendingStateChanges = []
+      this.synchronise()
+    }
+  }
+
+  /**
+   * Synchronise positions between the managed container and all children.
+   * This is called automatically when adding/inserting or removing children,
+   * but must be called manually if the managed container is manipulated
+   * outside of these methods (for example, if style properties change, or
+   * if it's resized).
+   */
+  synchronise() {
+    if (this._frozen) {
+      return
+    }
+
+    let child
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseMaster()
+      }
+    }
+
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseContainer()
+      }
+    }
+  }
+
+  dragIn(
+    dragInfo?: {
+      element: HTMLElement
+      clientX: number
+      clientY: number
+    },
+    callback?: Function
+  ) {
+    if (dragInfo) {
+      let {element, clientX, clientY} = dragInfo
+      let child =
+        element instanceof AddedContainerChild
+          ? element
+          : this.getChildByElement(element)
+      if (!child) {
+        this._dnd.child = new AddedContainerChild(element)
+      }
+
+      let dropTarget = this.getChildFromPoint(clientX, clientY)
+      let children = this._children
+      let lastIndex = this._children.length
+      let lastChild = this._children[lastIndex - 1]
+
+      if (dropTarget && dropTarget !== this._dnd.child.element) {
+        let dropChild: AddedContainerChild | null = null
+        let dropIndex = -1
+        let childIndex = -1
+        let insertBefore = true
+        for (let i = 0, iLen = children.length; i < iLen; i++) {
+          childIndex = i
+          if (!dropChild) {
+            insertBefore = false
+          }
+
+          if (children[i].element === dropTarget) {
+            dropChild = children[i]
+            dropIndex = i
+          }
+
+          if (dropIndex >= 0 && childIndex >= 0) {
+            break
+          }
+        }
+
+        if (dropIndex >= 0 && dropIndex < children.length - 2) {
+          // Default action, rearrange the dragged child to before or after
+          // the child underneath the touch/mouse point.
+          this.realInsertBefore(
+            this._dnd.child.container,
+            insertBefore
+              ? ((dropChild as AddedContainerChild).container as any)
+              : (dropChild as AddedContainerChild).container.nextSibling
+          )
+          this.realInsertBefore(
+            this._dnd.child.master,
+            insertBefore
+              ? ((dropChild as AddedContainerChild).master as any)
+              : (dropChild as AddedContainerChild).master.nextSibling
+          )
+
+          insertBefore
+            ? children.splice(dropIndex, 0, this._dnd.child)
+            : children.splice(dropIndex + 1, 0, this._dnd.child)
+          let x = dropChild?.master.offsetTop
+          let y = dropChild?.master.offsetLeft
+          this._dnd.child.container.style.transform = `translate(${x}px, ${y}px)`
+        }
+      } else {
+        // dropTaget为null(在最后一个元素附近) 或dropTarget为最后一个元素
+        let top = lastChild.master.offsetTop
+        let left = lastChild.master.offsetLeft
+        let newTop = null
+        let newLeft = null
+        let lastChildClient = lastChild.master.getBoundingClientRect()
+        let firstChildClient = children[0].master.getBoundingClientRect()
+        let py = lastIndex % 4
+        if (
+          Math.abs(clientX - lastChildClient.right) <
+            lastChild.master.offsetWidth / 2 &&
+          Math.abs(clientY - lastChildClient.bottom) <
+            lastChild.master.offsetHeight / 2 &&
+          py
+        ) {
+          // 最后一个元素在某一行的第1/2/3位置，下一个元素的位置
+          newTop = top
+          newLeft = left + lastChild.master.offsetWidth
+        }
+
+        if (
+          Math.abs(clientX - firstChildClient.right) <
+            lastChild.master.offsetWidth / 2 &&
+          Math.abs(clientY - lastChildClient.bottom) <
+            lastChild.master.offsetHeight / 2 &&
+          py == 0
+        ) {
+          // 最后一个元素在某一行的第4位置，下一个元素的位置在新的一行的第一个
+          newTop = top + lastChild.master.offsetHeight
+          newLeft = 0
+        }
+
+        if (newLeft !== null && newTop !== null) {
+          this._dnd.child.container.style.transform = `translate(${newTop}px, ${newLeft}px)`
+          this.realInsertBefore(this._dnd.child.container, children[0].master)
+          this.realAppendChild(this._dnd.child.master)
+          children.push(this._dnd.child)
+        } else {
+          return
+        }
+      }
+      // this.dispatchEvent(new CustomEvent('drag-added-rearrange', {composed: true}))
+      this.synchronise()
+      if (callback) {
+        callback()
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="content">
+        <slot @slotchange=${this}></slot>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-added-container': IconAddedContainer
+  }
+}
diff --git a/src/components/icon-added-container/index.ts b/src/components/icon-added-container/index.ts
new file mode 100644
index 0000000..7a947fe
--- /dev/null
+++ b/src/components/icon-added-container/index.ts
@@ -0,0 +1 @@
+export * from './icon-added-container.js'
diff --git a/src/components/icon-added-container/package.json b/src/components/icon-added-container/package.json
new file mode 100644
index 0000000..cca6475
--- /dev/null
+++ b/src/components/icon-added-container/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-added-container",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-added-container.js": {
+      "default": "./icon-added-container.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/components/icon-added-container/tsconfig.json b/src/components/icon-added-container/tsconfig.json
new file mode 100644
index 0000000..4ba3e2c
--- /dev/null
+++ b/src/components/icon-added-container/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
diff --git a/src/components/icon-unadd-container/container-style.ts b/src/components/icon-unadd-container/container-style.ts
new file mode 100644
index 0000000..fdf883b
--- /dev/null
+++ b/src/components/icon-unadd-container/container-style.ts
@@ -0,0 +1,19 @@
+import {css} from 'lit'
+
+export default css`
+  :host {
+    // position: relative;
+    display: flex;
+    flex: 1;
+    margin-bottom: 0;
+    width: 100%;
+    height: 100%;
+  }
+  ::slotted(.gaia-container-child):not(.dragging):not(.added) {
+    transition: transform 0.2s;
+  }
+  ::slotted(.gaia-container-child.dragging) {
+    z-index: 1;
+    will-change: transform;
+  }
+`
diff --git a/src/components/icon-unadd-container/icon-unadd-container.ts b/src/components/icon-unadd-container/icon-unadd-container.ts
new file mode 100644
index 0000000..6841cd2
--- /dev/null
+++ b/src/components/icon-unadd-container/icon-unadd-container.ts
@@ -0,0 +1,1013 @@
+import {html, LitElement} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import UnaddContainerChild from './unadd-container-child'
+
+/**
+ * The time, in ms, to wait for an animation to start in response to a state
+ * change, before removing the associated style class.
+ */
+const STATE_CHANGE_TIMEOUT = 100
+
+/**
+ * The time, in ms, to wait before initiating a drag-and-drop from a
+ * long-press.
+ */
+const DEFAULT_DND_TIMEOUT = 300
+
+/**
+ * The distance, in CSS pixels, in which a touch or mouse point can deviate
+ * before it being discarded for initiation of a drag-and-drop action.
+ */
+const DND_THRESHOLD = 5
+
+/**
+ * The minimum time between sending move events during drag-and-drop.
+ */
+const DND_MOVE_THROTTLE = 50
+interface ClickInfo {
+  pageX: number
+  pageY: number
+  clientX: number
+  clientY: number
+}
+
+interface lastClickInfo extends ClickInfo {
+  timeStamp: number
+}
+
+interface DragAndDrop {
+  // Whether drag-and-drop is enabled
+  enabled: boolean
+
+  // The time, in ms, to wait before initiating a drag-and-drop from a
+  // long-press
+  delay: number
+
+  // Timeout used to initiate drag-and-drop actions
+  timeout: NodeJS.Timeout
+
+  // The child that was tapped/clicked
+  child: any
+
+  // Whether a drag is active
+  active: boolean
+
+  // The start point of the drag action
+  start: ClickInfo
+
+  // The last point of the drag action
+  last: lastClickInfo
+
+  // Timeout used to send drag-move events
+  moveTimeout: NodeJS.Timeout
+
+  // The last time a move event was fired
+  lastMoveEventTime: number
+
+  // Whether to capture the next click event
+  clickCapture: boolean
+
+  center: {
+    x: number
+    y: number
+  }
+}
+
+@customElement('icon-unadd-container')
+export class IconUnaddContainer extends LitElement {
+  _frozen: boolean = false
+  _pendingStateChanges: Function[] = []
+  _children: UnaddContainerChild[] = []
+  _dnd: DragAndDrop = {
+    // Whether drag-and-drop is enabled
+    enabled: false,
+
+    // The time, in ms, to wait before initiating a drag-and-drop from a
+    // long-press
+    delay: DEFAULT_DND_TIMEOUT,
+
+    // Timeout used to initiate drag-and-drop actions
+    timeout: null as any,
+
+    // The child that was tapped/clicked
+    child: null,
+
+    // Whether a drag is active
+    active: false,
+
+    // The start point of the drag action
+    start: {
+      pageX: 0,
+      pageY: 0,
+      clientX: 0,
+      clientY: 0,
+    },
+
+    // The last point of the drag action
+    last: {
+      pageX: 0,
+      pageY: 0,
+      clientX: 0,
+      clientY: 0,
+      timeStamp: 0,
+    },
+
+    center: {
+      x: 0,
+      y: 0,
+    },
+    // Timeout used to send drag-move events
+    moveTimeout: null as any,
+
+    // The last time a move event was fired
+    lastMoveEventTime: 0,
+
+    // Whether to capture the next click event
+    clickCapture: false,
+  }
+  height: number = 0
+  width: number = 0
+  top: number = 0
+  left: number = 0
+  bottom: number = 0
+  right: number = 0
+  dndObserver: MutationObserver | null = null
+
+  @property({type: String}) id = ''
+  @property({type: Boolean}) isunadd = false
+
+  firstUpdated() {
+    let {width, height, top, right, bottom, left} = this.getBoundingClientRect()
+    this.height = height
+    this.width = width
+    this.top = top
+    this.left = left
+    this.bottom = bottom
+    this.right = right
+    let dndObserverCallback = () => {
+      if (this._dnd.enabled !== this.dragAndDrop) {
+        this._dnd.enabled = this.dragAndDrop
+        if (this._dnd.enabled) {
+          this.addEventListener('touchstart', this)
+          this.addEventListener('touchmove', this)
+          this.addEventListener('touchcancel', this)
+          this.addEventListener('touchend', this)
+          // this.addEventListener("mousedown", this);
+          // this.addEventListener("mousemove", this);
+          // this.addEventListener("mouseup", this);
+          this.addEventListener('click', this, true)
+          this.addEventListener('contextmenu', this, true)
+        } else {
+          this.cancelDrag()
+          this.removeEventListener('touchstart', this)
+          this.removeEventListener('touchmove', this)
+          this.removeEventListener('touchcancel', this)
+          this.removeEventListener('touchend', this)
+          // this.removeEventListener("mousedown", this);
+          // this.removeEventListener("mousemove", this);
+          // this.removeEventListener("mouseup", this);
+          this.removeEventListener('click', this, true)
+          this.removeEventListener('contextmenu', this, true)
+        }
+      }
+    }
+    this.dndObserver = new MutationObserver(dndObserverCallback)
+    this.dndObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ['drag-and-drop'],
+    })
+
+    dndObserverCallback()
+    window.addEventListener('resize', () => {
+      this.firstUpdated()
+    })
+  }
+
+  get elements() {
+    //div.icon-container
+    return this._children.map((child) => {
+      return child.element
+    })
+  }
+
+  get firstChild() {
+    return this._children.length ? this._children[0].element : null
+  }
+
+  get lastChild() {
+    const length = this._children.length
+    return length ? this._children[length - 1].element : null
+  }
+
+  get dragAndDrop() {
+    return this.getAttribute('drag-and-drop') !== null
+  }
+
+  get dragAndDropTimeout() {
+    return this._dnd.delay
+  }
+
+  set dragAndDropTimeout(timeout) {
+    if (timeout >= 0) {
+      this._dnd.delay = timeout
+    } else {
+      this._dnd.delay = DEFAULT_DND_TIMEOUT
+    }
+  }
+
+  getChildByElement(element: HTMLElement) {
+    let children = [...this._children]
+    for (const child of children) {
+      if (
+        child._element === element ||
+        child.master === element ||
+        child.container === element
+      ) {
+        return child
+      }
+    }
+
+    return null
+  }
+
+  realAppendChild(element: HTMLElement) {
+    let proto = HTMLElement.prototype.appendChild
+    let func = proto.call(this, element)
+    return func
+  }
+
+  realRemoveChild(element: HTMLElement) {
+    let proto = HTMLElement.prototype.removeChild
+    let func = proto.call(this, element)
+    return func
+  }
+
+  realInsertBefore(...args: [HTMLElement, HTMLElement]) {
+    let proto = HTMLElement.prototype.insertBefore
+    let func = proto.apply(this, args)
+    return func
+  }
+
+  realReplaceChild(...args: [HTMLElement, HTMLElement]) {
+    let proto = HTMLElement.prototype.replaceChild
+    let func = proto.apply(this, args)
+    return func
+  }
+
+  appendContainerChild(element: HTMLElement, callback: Function) {
+    this.insertContainerBefore(element, null, callback)
+  }
+
+  clearAll() {
+    this.elements.forEach((el) => {
+      this.removeContainerChild(el as HTMLElement)
+    })
+  }
+
+  removeContainerChild(element: HTMLElement, callback?: Function) {
+    let children = this._children
+    let childToRemove: UnaddContainerChild | null = null
+
+    for (let child of children) {
+      if (child.element === element) {
+        childToRemove = child
+        break
+      }
+    }
+
+    if (childToRemove === null) {
+      throw 'removeChild called on unknown child'
+    }
+
+    this.changeState(childToRemove, 'removed', () => {
+      this.realRemoveChild((childToRemove as UnaddContainerChild).container)
+      this.realRemoveChild((childToRemove as UnaddContainerChild).master)
+
+      // Find the child again. We need to do this in case the container was
+      // manipulated between removing the child and this callback being reached.
+      for (let i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i] === childToRemove) {
+          children.splice(i, 1)
+          break
+        }
+      }
+
+      if (callback) {
+        callback()
+      }
+
+      this.synchronise()
+    })
+  }
+
+  replaceContainerChild(
+    newElement: HTMLElement,
+    oldElement: HTMLElement,
+    callback: Function
+  ) {
+    if (!newElement || !oldElement) {
+      throw 'replaceChild called with null arguments'
+    }
+
+    // Unparent the newElement if necessary (with support for gaia-container)
+    if (newElement.parentNode) {
+      this.removeContainerChild(newElement, () => {
+        this.replaceContainerChild(newElement, oldElement, callback)
+      })
+      if (newElement.parentNode) {
+        return
+      }
+    }
+
+    // Remove the old child and add the new one, but don't run the removed/
+    // added state changes.
+    let children = this._children
+
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let oldChild = children[i]
+      if (oldChild.element === oldElement) {
+        let newChild = new UnaddContainerChild(newElement)
+        this.realInsertBefore(newChild.container, oldChild.container)
+        this.realInsertBefore(newChild.master, oldChild.master)
+        this.realRemoveChild(oldChild.container)
+        this.realRemoveChild(oldChild.master)
+        this._children.splice(i, 1, newChild)
+        this.synchronise()
+
+        if (callback) {
+          callback()
+        }
+        return
+      }
+    }
+
+    throw 'removeChild called on unknown child'
+  }
+
+  /**
+   * Reorders the given element to appear before referenceElement.
+   */
+  reorderChild(
+    element: HTMLElement,
+    referenceElement: HTMLElement,
+    callback: Function
+  ) {
+    if (!element) {
+      throw 'reorderChild called with null element'
+    }
+
+    let children = this._children
+    let child = null
+    let childIndex = null
+    let referenceChild = null
+    let referenceChildIndex = null
+
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      if (children[i].element === element) {
+        child = children[i]
+        childIndex = i
+      } else if (children[i].element === referenceElement) {
+        referenceChild = children[i]
+        referenceChildIndex = i
+      }
+
+      if (child && (referenceChild || !referenceElement)) {
+        this.realRemoveChild(child.container)
+        this.realRemoveChild(child.master)
+        children.splice(childIndex as number, 1)
+
+        if (referenceChild) {
+          this.realInsertBefore(child.container, referenceChild.container)
+          this.realInsertBefore(child.master, referenceChild.master)
+        } else {
+          children.length === 0
+            ? this.realAppendChild(child.container)
+            : this.realInsertBefore(child.container, children[0].master)
+          this.realAppendChild(child.master)
+        }
+
+        referenceChild
+          ? children.splice(
+              (referenceChildIndex as number) -
+                ((childIndex as number) < (referenceChildIndex as number)
+                  ? 1
+                  : 0),
+              0,
+              child
+            )
+          : children.splice(children.length, 0, child)
+
+        this.synchronise()
+
+        if (callback) {
+          callback()
+        }
+        return
+      }
+    }
+
+    throw child
+      ? 'reorderChild called on unknown reference element'
+      : 'reorderChild called on unknown child'
+  }
+
+  insertContainerBefore(
+    element: HTMLElement,
+    reference: HTMLElement | null,
+    callback: Function
+  ) {
+    let children = this._children
+    let childToInsert = new UnaddContainerChild(element)
+    let referenceIndex = -1
+
+    if (reference !== null) {
+      for (let i = 0, iLen = children.length; i < iLen; i++) {
+        if (children[i].element === reference) {
+          referenceIndex = i
+          break
+        }
+      }
+      if (referenceIndex === -1) {
+        throw 'insertBefore called on unknown child'
+      }
+    }
+
+    if (referenceIndex === -1) {
+      children.length === 0
+        ? this.realAppendChild(childToInsert.container)
+        : this.realInsertBefore(childToInsert.container, children[0].master)
+      this.realAppendChild(childToInsert.master)
+      children.push(childToInsert)
+    } else {
+      this.realInsertBefore(
+        childToInsert.container,
+        children[referenceIndex].container
+      )
+      this.realInsertBefore(
+        childToInsert.master,
+        children[referenceIndex].master
+      )
+      children.splice(referenceIndex, 0, childToInsert)
+    }
+
+    this.changeState(childToInsert, 'added', callback)
+    this.synchronise()
+  }
+
+  /**
+   * Used to execute a state-change of a child that may possibly be animated.
+   * @state will be added to the child's class-list. If an animation starts that
+   * has the same name, that animation will complete and @callback will be
+   * called. Otherwise, the class will be removed and @callback called on the
+   * next frame.
+   */
+  changeState(
+    child: UnaddContainerChild,
+    state: 'added' | 'removed',
+    callback: Function
+  ) {
+    // Check that the child is still attached to this parent (can happen if
+    // the child is removed while frozen).
+    if ((child.container as any).parentNode !== this) {
+      return
+    }
+
+    // Check for a redundant state change.
+    if (child.container.classList.contains(state)) {
+      return
+    }
+
+    // Queue up state change if we're frozen.
+    if (this._frozen) {
+      this._pendingStateChanges.push(
+        this.changeState.bind(this, child, state, callback)
+      )
+      return
+    }
+
+    let animStart = (e: AnimationEvent) => {
+      if (!e.animationName.endsWith(state)) {
+        return
+      }
+
+      child.container.removeEventListener('animationstart', animStart)
+
+      window.clearTimeout(child[state])
+      delete child[state]
+
+      child.container.addEventListener('animationend', function animEnd() {
+        child.container.removeEventListener('animationend', animEnd)
+        child.container.classList.remove(state)
+        if (callback) {
+          callback()
+        }
+      })
+    }
+
+    child.container.addEventListener('animationstart', animStart)
+    child.container.classList.add(state)
+
+    child[state] = window.setTimeout(() => {
+      delete child[state]
+      child.container.removeEventListener('animationstart', animStart)
+      child.container.classList.remove(state)
+      if (callback) {
+        callback()
+      }
+    }, STATE_CHANGE_TIMEOUT)
+  }
+
+  getChildOffsetRect(element: HTMLElement) {
+    let children = this._children
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let child = children[i]
+      if (child.element === element) {
+        let top = child._lastMasterTop as number
+        let left = child._lastMasterLeft as number
+        let width = child._lastElementWidth as number
+        let height = child._lastElementHeight as number
+
+        return {
+          top: top,
+          left: left,
+          width: width,
+          height: height,
+          right: left + width,
+          bottom: top + height,
+        }
+      }
+    }
+
+    throw 'getChildOffsetRect called on unknown child'
+  }
+
+  getChildFromPoint(x: number, y: number) {
+    let children = this._children
+    for (
+      let parent = this.parentElement;
+      parent;
+      parent = parent.parentElement
+    ) {
+      x += parent.scrollLeft - parent.offsetLeft
+      y += parent.scrollTop - parent.offsetTop
+    }
+    for (let i = 0, iLen = children.length; i < iLen; i++) {
+      let child = children[i]
+      if (
+        x >= (child._lastMasterLeft as number) &&
+        y >= (child._lastMasterTop as number) &&
+        x <
+          (child._lastMasterLeft as number) +
+            (child._lastElementWidth as number) &&
+        y <
+          (child._lastMasterTop as number) +
+            (child._lastElementHeight as number)
+      ) {
+        return child.element
+      }
+    }
+
+    return null
+  }
+
+  cancelDrag() {
+    if (this._dnd.timeout !== null) {
+      clearTimeout(this._dnd.timeout)
+      this._dnd.timeout = null as any
+    }
+
+    if (this._dnd.moveTimeout !== null) {
+      clearTimeout(this._dnd.moveTimeout)
+      this._dnd.moveTimeout = null as any
+    }
+
+    if (this._dnd.active) {
+      this._dnd.child.container.classList.remove('dragging')
+      this._dnd.child.container.style.position = 'absolute'
+      this._dnd.child.container.style.top = '0'
+      this._dnd.child.container.style.left = '0'
+      this._dnd.child.markDirty()
+      this._dnd.child = null
+      this._dnd.active = false
+      this.synchronise()
+      this._dnd.clickCapture = true
+      this.dispatchEvent(new CustomEvent('drag-unadd-finish', {composed: true}))
+    }
+  }
+
+  startDrag() {
+    const child = this._dnd.child
+    this._dnd.center.x = child._lastMasterLeft + child.master.offsetWidth / 2
+    this._dnd.center.y = child._lastMasterTop + child.master.offsetHeight / 2
+    if (
+      !this.dispatchEvent(
+        new CustomEvent('drag-unadd-start', {
+          cancelable: true,
+          detail: {
+            target: this._dnd.child.element,
+            pageX: this._dnd.start.pageX,
+            pageY: this._dnd.start.pageY,
+            clientX: this._dnd.start.clientX,
+            clientY: this._dnd.start.clientY,
+          },
+          composed: true,
+        })
+      )
+    ) {
+      return
+    }
+
+    this._dnd.active = true
+    this._dnd.child.container.classList.add('dragging')
+    this._dnd.child.container.style.position = 'fixed'
+    let rect = this.getBoundingClientRect()
+    this._dnd.child.container.style.top = rect.top + 'px'
+    this._dnd.child.container.style.left = rect.left + 'px'
+  }
+
+  continueDrag() {
+    if (!this._dnd.active) {
+      return
+    }
+
+    let left =
+      this._dnd.child.master.offsetLeft +
+      (this._dnd.last.pageX - this._dnd.start.pageX)
+    let top =
+      this._dnd.child.master.offsetTop +
+      (this._dnd.last.pageY - this._dnd.start.pageY)
+    this._dnd.child.container.style.transform =
+      'translate(' + left + 'px, ' + top + 'px)'
+
+    if (this._dnd.moveTimeout === null) {
+      let delay = Math.max(
+        0,
+        DND_MOVE_THROTTLE -
+          (this._dnd.last.timeStamp - this._dnd.lastMoveEventTime)
+      )
+      this._dnd.moveTimeout = setTimeout(() => {
+        this._dnd.moveTimeout = null as any
+        this._dnd.lastMoveEventTime = this._dnd.last.timeStamp
+        this.dispatchEvent(
+          new CustomEvent('drag-unadd-move', {
+            detail: {
+              target: this._dnd.child.element,
+              pageX: this._dnd.last.pageX,
+              pageY: this._dnd.last.pageY,
+              clientX: this._dnd.last.clientX,
+              clientY: this._dnd.last.clientY,
+            },
+            composed: true,
+          })
+        )
+      }, delay)
+    }
+  }
+
+  endDrag(event: Event) {
+    if (this._dnd.active) {
+      const centerX =
+        this.left +
+        this._dnd.center.x +
+        (this._dnd.last.pageX - this._dnd.start.pageX)
+      const centerY =
+        this.top +
+        this._dnd.center.y +
+        (this._dnd.last.pageY - this._dnd.start.pageY)
+
+      const elementHeight = this._dnd.child.element.offsetHeight
+      const elementWidth = this._dnd.child.element.offsetWidth
+      let dropTarget = this.getChildFromPoint(
+        this._dnd.last.clientX,
+        this._dnd.last.clientY
+      )
+
+      if (
+        this.dispatchEvent(
+          new CustomEvent('drag-unadd-end', {
+            cancelable: true,
+            detail: {
+              target: this._dnd.child.element,
+              dropTarget: dropTarget,
+              pageX: this._dnd.last.pageX,
+              pageY: this._dnd.last.pageY,
+              clientX: this._dnd.last.clientX,
+              clientY: this._dnd.last.clientY,
+              centerX,
+              centerY,
+              gridHeight: elementHeight,
+              gridWidth: elementWidth,
+            },
+            composed: true,
+          })
+        )
+      ) {
+        let children = this._children
+        if (dropTarget && dropTarget !== this._dnd.child.element) {
+          let dropChild: UnaddContainerChild | null = null
+          let dropIndex = -1
+          let childIndex = -1
+          let insertBefore = true
+          for (let i = 0, iLen = children.length; i < iLen; i++) {
+            if (children[i] === this._dnd.child) {
+              childIndex = i
+              if (!dropChild) {
+                insertBefore = false
+              }
+            }
+
+            if (children[i].element === dropTarget) {
+              dropChild = children[i]
+              dropIndex = i
+            }
+
+            if (dropIndex >= 0 && childIndex >= 0) {
+              break
+            }
+          }
+
+          if (dropIndex >= 0 && childIndex >= 0) {
+            // Default action, rearrange the dragged child to before or after
+            // the child underneath the touch/mouse point.
+            this.realRemoveChild(this._dnd.child.container)
+            this.realRemoveChild(this._dnd.child.master)
+            this.realInsertBefore(
+              this._dnd.child.container,
+              insertBefore
+                ? ((dropChild as UnaddContainerChild).container as any)
+                : (dropChild as UnaddContainerChild).container.nextSibling
+            )
+            this.realInsertBefore(
+              this._dnd.child.master,
+              insertBefore
+                ? ((dropChild as UnaddContainerChild).master as any)
+                : (dropChild as UnaddContainerChild).master.nextSibling
+            )
+            children.splice(dropIndex, 0, children.splice(childIndex, 1)[0])
+            this.dispatchEvent(
+              new CustomEvent('drag-unadd-rearrange', {composed: true})
+            )
+          }
+        }
+      }
+    } else if (this._dnd.timeout !== null) {
+      let handled = !this.dispatchEvent(
+        new CustomEvent('unadd-activate', {
+          cancelable: true,
+          composed: true,
+          detail: {
+            target: this._dnd.child.element,
+          },
+        })
+      )
+      if (handled) {
+        event.stopImmediatePropagation()
+        event.preventDefault()
+      }
+    }
+
+    this.cancelDrag()
+  }
+
+  handleEvent(event: Event) {
+    switch (event.type) {
+      case 'touchstart':
+      case 'mousedown':
+        event.preventDefault()
+        if (this._dnd.active || this._dnd.timeout) {
+          this.cancelDrag()
+          break
+        }
+
+        if (event instanceof MouseEvent) {
+          this._dnd.start.pageX = event.pageX
+          this._dnd.start.pageY = event.pageY
+          this._dnd.start.clientX = event.clientX
+          this._dnd.start.clientY = event.clientY
+        } else {
+          this._dnd.start.pageX = (event as TouchEvent).touches[0].pageX
+          this._dnd.start.pageY = (event as TouchEvent).touches[0].pageY
+          this._dnd.start.clientX = (event as TouchEvent).touches[0].clientX
+          this._dnd.start.clientY = (event as TouchEvent).touches[0].clientY
+        }
+
+        this._dnd.last.pageX = this._dnd.start.pageX
+        this._dnd.last.pageY = this._dnd.start.pageY
+        this._dnd.last.clientX = this._dnd.start.clientX
+        this._dnd.last.clientY = this._dnd.start.clientY
+        this._dnd.last.timeStamp = event.timeStamp
+
+        let target = event.target as any //gaia-app-icon
+
+        for (; target.parentNode !== this; target = target.parentNode) {
+          if (target === this || !target.parentNode) {
+            return
+          }
+        }
+
+        // Find the child
+        let children = this._children
+        for (let child of children) {
+          if (child.container === target) {
+            this._dnd.child = child
+            break
+          }
+        }
+
+        if (!this._dnd.child) {
+          return
+        }
+
+        if (this._dnd.delay > 0) {
+          this._dnd.timeout = setTimeout(() => {
+            this._dnd.timeout = null as any
+            this.startDrag()
+          }, this._dnd.delay)
+        } else {
+          this.startDrag()
+        }
+        break
+
+      case 'touchmove':
+      case 'mousemove':
+        let pageX, pageY, clientX, clientY
+        if (event instanceof MouseEvent) {
+          pageX = event.pageX
+          pageY = event.pageY
+          clientX = event.clientX
+          clientY = event.clientY
+        } else {
+          pageX = (event as TouchEvent).touches[0].pageX
+          pageY = (event as TouchEvent).touches[0].pageY
+          clientX = (event as TouchEvent).touches[0].clientX
+          clientY = (event as TouchEvent).touches[0].clientY
+        }
+
+        if (this._dnd.timeout) {
+          if (
+            Math.abs((pageX as number) - this._dnd.start.pageX) >
+              DND_THRESHOLD ||
+            Math.abs((pageY as number) - this._dnd.start.pageY) > DND_THRESHOLD
+          ) {
+            clearTimeout(this._dnd.timeout)
+            this._dnd.timeout = null as any
+          }
+        } else if (this._dnd.active) {
+          event.preventDefault()
+          this._dnd.last.pageX = pageX as number
+          this._dnd.last.pageY = pageY as number
+          this._dnd.last.clientX = clientX as number
+          this._dnd.last.clientY = clientY as number
+          this._dnd.last.timeStamp = event.timeStamp
+
+          this.continueDrag()
+        }
+
+        if (this._dnd.active) {
+          const centerX =
+            this._dnd.center.x + (this._dnd.last.pageX - this._dnd.start.pageX)
+          const centerY =
+            this._dnd.center.y + (this._dnd.last.pageY - this._dnd.start.pageY)
+
+          let distanceX = this._dnd.last.clientX - this._dnd.start.clientX
+          let distanceY = this._dnd.last.clientY - this._dnd.start.clientY
+          if (centerY < this.offsetTop) {
+            this.dispatchEvent(
+              new CustomEvent('drag-outside-unadd-container', {
+                detail: {
+                  element: this._dnd.child.element,
+                  centerX,
+                  centerY,
+                  clientX,
+                  clientY,
+                  distanceX,
+                  distanceY,
+                },
+                composed: true,
+              })
+            )
+          }
+        }
+        break
+
+      case 'touchcancel':
+        this.cancelDrag()
+        break
+
+      case 'touchend':
+      case 'mouseup':
+        if (this._dnd.active) {
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
+        this.endDrag(event)
+        break
+
+      case 'click':
+        if (this._dnd.clickCapture) {
+          this._dnd.clickCapture = false
+          event.preventDefault()
+          event.stopImmediatePropagation()
+        }
+        break
+
+      case 'contextmenu':
+        if (this._dnd.active || this._dnd.timeout) {
+          event.stopImmediatePropagation()
+          // event.preventDefault();
+        }
+        break
+    }
+  }
+
+  /**
+   * Temporarily disables element position synchronisation. Useful when adding
+   * multiple elements to the container at the same time, or in quick
+   * succession.
+   */
+  freeze() {
+    this._frozen = true
+  }
+
+  /**
+   * Enables element position synchronisation after freeze() has been called.
+   */
+  thaw() {
+    if (this._frozen) {
+      this._frozen = false
+      for (let callback of this._pendingStateChanges) {
+        callback()
+      }
+      this._pendingStateChanges = []
+      this.synchronise()
+    }
+  }
+
+  /**
+   * Synchronise positions between the managed container and all children.
+   * This is called automatically when adding/inserting or removing children,
+   * but must be called manually if the managed container is manipulated
+   * outside of these methods (for example, if style properties change, or
+   * if it's resized).
+   */
+  synchronise() {
+    if (this._frozen) {
+      return
+    }
+
+    let child
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseMaster()
+      }
+    }
+
+    for (child of this._children) {
+      if (!this._dnd.active || child !== this._dnd.child) {
+        child.synchroniseContainer()
+      }
+    }
+  }
+
+  // 拖拽进未添加开关容器的元素暂放在第一个位置
+  dragIn(element: HTMLElement, callback?: Function) {
+    let child =
+      element instanceof UnaddContainerChild
+        ? element
+        : this.getChildByElement(element)
+    if (!child) {
+      this._dnd.child = new UnaddContainerChild(element)
+    }
+
+    let children = this._children
+    if (children.length) {
+      this.realInsertBefore(this._dnd.child.container, children[0].container)
+      this.realInsertBefore(this._dnd.child.master, children[0].master)
+      children.splice(0, 0, this._dnd.child)
+    } else {
+      this.realAppendChild(this._dnd.child.container)
+      this.realAppendChild(this._dnd.child.master)
+      children.push(this._dnd.child)
+    }
+    // this.dispatchEvent(new CustomEvent('drag-unadd-rearrange', {composed: true}))
+    this._dnd.child.container.style.transform = `translate(0px)`
+    this.synchronise()
+    if (callback) {
+      callback()
+    }
+  }
+
+  render() {
+    return html`
+      <div class="content">
+        <slot @slotchange=${this}></slot>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-unadd-container': IconUnaddContainer
+  }
+}
diff --git a/src/components/icon-unadd-container/index.ts b/src/components/icon-unadd-container/index.ts
new file mode 100644
index 0000000..0979672
--- /dev/null
+++ b/src/components/icon-unadd-container/index.ts
@@ -0,0 +1 @@
+export * from './icon-unadd-container.js'
diff --git a/src/components/icon-unadd-container/package.json b/src/components/icon-unadd-container/package.json
new file mode 100644
index 0000000..15dd664
--- /dev/null
+++ b/src/components/icon-unadd-container/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-unadd-container",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-unadd-container.js": {
+      "default": "./icon-unadd-container.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/components/icon-unadd-container/tsconfig.json b/src/components/icon-unadd-container/tsconfig.json
new file mode 100644
index 0000000..4ba3e2c
--- /dev/null
+++ b/src/components/icon-unadd-container/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
diff --git a/src/components/icon-unadd-container/unadd-container-child.ts b/src/components/icon-unadd-container/unadd-container-child.ts
new file mode 100644
index 0000000..b65950b
--- /dev/null
+++ b/src/components/icon-unadd-container/unadd-container-child.ts
@@ -0,0 +1,114 @@
+export default class UnaddContainerChild {
+  _element: HTMLElement | null
+  _container: HTMLElement | null = null
+  _master: HTMLElement | null = null
+  _lastElementWidth: number | null = null
+  _lastElementHeight: number | null = null
+  _lastElementDisplay: string | null = null
+  _lastElementOrder: string | null = null
+  _lastMasterTop: number | null = null
+  _lastMasterLeft: number | null = null
+  // 状态计时器
+  removed: number | undefined = undefined
+  added: number | undefined = undefined
+
+  constructor(element: HTMLElement | null) {
+    this._element = element
+    this.markDirty()
+  }
+
+  get element() {
+    return this._element
+  }
+
+  /**
+   * The element that will contain the child element and control its position.
+   */
+  get container() {
+    if (!this._container) {
+      // Create container
+      let container = document.createElement('div')
+      container.classList.add('gaia-container-child')
+      container.style.position = 'absolute'
+      container.style.top = '0'
+      container.style.left = '0'
+      container.appendChild(this.element as HTMLElement) //this.element是div.icon-container
+
+      this._container = container
+    }
+    return this._container
+  }
+
+  /**
+   * The element that will be added to the container that will
+   * control the element's transform.
+   */
+  get master() {
+    if (!this._master) {
+      // Create master
+      let master = document.createElement('div')
+      master.style.visibility = 'hidden'
+      this._master = master
+    }
+    return this._master
+  }
+
+  /**
+   * Clears any cached style properties. To be used if elements are
+   * manipulated outside of the methods of this object.
+   */
+  markDirty() {
+    this._lastElementWidth = null
+    this._lastElementHeight = null
+    this._lastElementDisplay = null
+    this._lastElementOrder = null
+    this._lastMasterTop = null
+    this._lastMasterLeft = null
+  }
+
+  /**
+   * Synchronise the size of the master with the managed child element.
+   */
+  synchroniseMaster() {
+    let master = this.master
+    let element = this.element
+
+    let style = window.getComputedStyle(element as HTMLElement)
+    let display = style.display
+    let order = style.order
+    let width = (element as HTMLElement).offsetWidth
+    let height = (element as HTMLElement).offsetHeight
+
+    if (
+      this._lastElementWidth !== width ||
+      this._lastElementHeight !== height ||
+      this._lastElementDisplay !== display ||
+      this._lastElementOrder !== order
+    ) {
+      this._lastElementWidth = width
+      this._lastElementHeight = height
+      this._lastElementDisplay = display
+      this._lastElementOrder = order
+
+      master.style.width = width + 'px'
+      master.style.height = height + 'px'
+      master.style.display = display
+      master.style.order = order
+    }
+  }
+
+  /**
+   * Synchronise the container's transform with the position of the master.
+   */
+  synchroniseContainer() {
+    let master = this.master
+    let container = this.container
+    let top = master.offsetTop
+    let left = master.offsetLeft
+    if (this._lastMasterTop !== top || this._lastMasterLeft !== left) {
+      this._lastMasterTop = top
+      this._lastMasterLeft = left
+      container.style.transform = 'translate(' + left + 'px, ' + top + 'px)'
+    }
+  }
+}
diff --git a/src/components/toast/style.ts b/src/components/toast/style.ts
new file mode 100644
index 0000000..922866a
--- /dev/null
+++ b/src/components/toast/style.ts
@@ -0,0 +1,92 @@
+import {css} from 'lit'
+
+export default css`
+  /** Host
+ ---------------------------------------------------------*/
+
+  :host {
+    position: fixed;
+    left: 50%;
+    bottom: 13.33vh;
+    border-radius: var(--auto-20px);
+    max-width: 70%;
+    text-align: center;
+    z-index: 100;
+    color: var(--font-main-black, #262626);
+    overflow: hidden;
+    transform: translateX(-50%);
+  }
+
+  /** Inner
+  ---------------------------------------------------------*/
+
+  .inner {
+    display: none;
+  }
+
+  .inner.visible {
+    display: block;
+  }
+
+  /**
+ ---------------------------------------------------------*/
+
+  .bread {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: var(--auto-24px) var(--auto-32px);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
+    transform: translateY(100%);
+    font-size: var(--auto-26px);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: var(--font-normal-color);
+
+    background: var(--base-normal-bgc);
+    transition: color 0.2s, background 0.2s;
+  }
+
+  .bread.animate-in {
+    animation-name: gaia-toast-enter;
+    animation-fill-mode: forwards;
+    animation-duration: 300ms;
+  }
+
+  .bread.animate-out {
+    animation-name: gaia-toast-leave;
+    animation-duration: 600ms;
+    transform: translateY(0%);
+  }
+
+  @keyframes gaia-toast-enter {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+
+    40% {
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateY(0%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes gaia-toast-leave {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @media screen and (orientation: landscape) {
+    :host {
+    }
+  }
+`
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index b2b8170..4aae9e4 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -1,6 +1,9 @@
-import {html, LitElement, CSSResultArray, TemplateResult} from 'lit'
+import {html, CSSResultArray} from 'lit'
 import {customElement, property, query, state} from 'lit/decorators.js'
 import {sharedStyles} from './toast-styles.js'
+import {autoPxStyle} from '../base/auto-px-style'
+import {StarBaseElement} from '../base/star-base-element.js'
+import style from './style'
 
 export const toastVariants: ToastVariants[] = [
   'negative',
@@ -18,17 +21,110 @@ export type ToastVariants =
   | 'warning'
   | ''
 
+enum Direction {
+  top,
+  bottom,
+}
+
+interface Options {
+  [prop: string]: string | boolean | undefined
+  direction?: keyof typeof Direction
+  icon?: boolean
+  close?: boolean
+  verline?: boolean
+  do?: boolean
+  information: string
+}
+// BUG: 该组件存在 UI 隐患, 因为弹出键盘时, 使用该组件的应用将会被键盘挤压窗口
+// 导致该组件位置会被推至屏幕上方, 无法避免; 即便不被挤压(如Homescreen), 仍会
+// 存在被键盘遮挡的情况, 依旧无法避免
 @customElement('star-toast')
-export class StarToast extends LitElement {
+export class StarToast extends StarBaseElement {
   public static override get styles(): CSSResultArray {
-    return [sharedStyles]
+    return [style, sharedStyles, autoPxStyle]
   }
+  /* 暂时更改使用: start */
+  constructor(options: Options) {
+    super()
+    Object.assign(this, options)
+    document.body.appendChild(this)
+    this.appended = true
+  }
+
+  @property()
+  public direction: keyof typeof Direction = 'bottom'
+
+  @property({type: Number})
+  get timeout() {
+    return Number(this.getAttribute('timeout')) || 3000
+  }
+
+  set timeout(value) {
+    let current = Number(this.getAttribute('timeout'))
+
+    if (current == value) {
+      return
+    } else if (!value) {
+      this.removeAttribute('timeout')
+    } else {
+      this.setAttribute('timeout', String(value))
+    }
+  }
+
+  appended: boolean = false
+
+  onAnimateOutEnd = (_: any) => {}
+
+  hideTimeout?: number
+
+  @query('.inner') inner!: HTMLElement
+  @query('.bread') bread!: HTMLElement
+
+  show = () => {
+    if (!this.appended) {
+      document.body.appendChild(this)
+      this.appended = true
+    }
+    this.open = true
+    this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
+    clearTimeout(this.hideTimeout)
+
+    this.inner.classList.add('visible')
+    this.bread.classList.remove('animate-out')
+    this.bread.classList.add('animate-in')
+    this.hideTimeout = window.setTimeout(this.hide.bind(this), this.timeout)
+  }
+
+  hide = () => {
+    clearTimeout(this.hideTimeout)
+    this.open = false
+    this.bread.classList.remove('animate-in')
+    this.bread.classList.add('animate-out')
+
+    this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
+    this.onAnimateOutEnd = () => {
+      this.bread.removeEventListener('animationend', this.onAnimateOutEnd)
+      this.bread.classList.remove('animate-out')
+      this.inner.classList.remove('visible')
+    }
+
+    this.bread.addEventListener('animationend', this.onAnimateOutEnd)
+  }
+
+  render() {
+    return html`
+      <div class="inner">
+        <div class="bread">${this.information}</div>
+      </div>
+    `
+  }
+  /* 暂时更改使用: end */
 
   @state()
   public open: Boolean = false
 
-  @property({type: Number})
-  private timeout = 5000
+  // @property({type: Number})
+  // private timeout = 5000
 
   @property({type: String})
   public variant: ToastVariants = ''
@@ -52,77 +148,77 @@ export class StarToast extends LitElement {
   @property({type: String})
   public buttonName = ''
 
-  private renderIcon(): TemplateResult {
-    switch (this.variant) {
-      case 'positive':
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 36 36"
-            role="img"
-            fill="white"
-            aria-hidden="false"
-            aria-label="Success"
-          >
-            <path
-              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
-            ></path>
-          </svg>
-        `
-      case 'warning':
-      case 'info':
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 36 36"
-            role="img"
-            fill="white"
-            aria-hidden="false"
-            aria-label="Information"
-          >
-            <path
-              d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
-            ></path>
-          </svg>
-        `
-      case 'error':
-      case 'negative':
-      default:
-        return html`
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 36 36"
-            role="img"
-            fill="white"
-            aria-hidden="false"
-            aria-label="Error"
-          >
-            <path
-              d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
-            ></path>
-          </svg>
-        `
-    }
-  }
+  // private renderIcon() {
+  //   switch (this.variant) {
+  //     case 'positive':
+  //       return html`
+  //         <svg
+  //           xmlns="http://www.w3.org/2000/svg"
+  //           viewBox="0 0 36 36"
+  //           role="img"
+  //           fill="white"
+  //           aria-hidden="false"
+  //           aria-label="Success"
+  //         >
+  //           <path
+  //             d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
+  //           ></path>
+  //         </svg>
+  //       `
+  //     case 'warning':
+  //     case 'info':
+  //       return html`
+  //         <svg
+  //           xmlns="http://www.w3.org/2000/svg"
+  //           viewBox="0 0 36 36"
+  //           role="img"
+  //           fill="white"
+  //           aria-hidden="false"
+  //           aria-label="Information"
+  //         >
+  //           <path
+  //             d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
+  //           ></path>
+  //         </svg>
+  //       `
+  //     case 'error':
+  //     case 'negative':
+  //     default:
+  //       return html`
+  //         <svg
+  //           xmlns="http://www.w3.org/2000/svg"
+  //           viewBox="0 0 36 36"
+  //           role="img"
+  //           fill="white"
+  //           aria-hidden="false"
+  //           aria-label="Error"
+  //         >
+  //           <path
+  //             d="M17.127 2.579.4 32.512A1 1 0 0 0 1.272 34h33.456a1 1 0 0 0 .872-1.488L18.873 2.579a1 1 0 0 0-1.746 0ZM20 29.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Zm0-6a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5Z"
+  //           ></path>
+  //         </svg>
+  //       `
+  //   }
+  // }
 
-  protected override render(): TemplateResult {
-    return html`
-      <div open=${this.open} class="toast" id="toast" variant=${this.variant}>
-        <div>
-          <icon icon=${this.icon}>${this.renderIcon()}</icon>
-        </div>
-        <div>
-          <span class="text">${this.information}</span>
-          <do do=${this.do} wraping>Do Something</do>
-        </div>
-        <verline verline=${this.verline}></verline>
-        <close close=${this.close} @click=${this.closeToast}>X</close>
-      </div>
-      <div>
-        <do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
-      </div>
-    `
-  }
+  // protected override render() {
+  //   return html`
+  //     <div open=${this.open} class="toast" id="toast" variant=${this.variant}>
+  //       <div>
+  //         <icon icon=${this.icon}>${this.renderIcon()}</icon>
+  //       </div>
+  //       <div>
+  //         <span class="text">${this.information}</span>
+  //         <do do=${this.do} wraping>Do Something</do>
+  //       </div>
+  //       <verline verline=${this.verline}></verline>
+  //       <close close=${this.close} @click=${this.closeToast}>X</close>
+  //     </div>
+  //     <div>
+  //       <do do="true" click @click=${this.toastChange}>${this.buttonName}</do>
+  //     </div>
+  //   `
+  // }
 
   @query('#toast')
   toast!: HTMLElement
diff --git a/src/components/toast/tsconfig.json b/src/components/toast/tsconfig.json
index 4ba3e2c..9198057 100644
--- a/src/components/toast/tsconfig.json
+++ b/src/components/toast/tsconfig.json
@@ -4,5 +4,5 @@
     "composite": true,
     "rootDir": "../../"
   },
-  "include": ["*.ts"]
+  "include": ["*.ts", "../base/*.ts"]
 }
diff --git a/src/test/panels/battery-square/battery-square.ts b/src/test/panels/battery-square/battery-square.ts
index 20341c8..b39b4d8 100644
--- a/src/test/panels/battery-square/battery-square.ts
+++ b/src/test/panels/battery-square/battery-square.ts
@@ -1,4 +1,4 @@
-import {html, LitElement, CSSResultArray} from 'lit'
+import {html, LitElement, CSSResultArray, css} from 'lit'
 import {customElement} from 'lit/decorators.js'
 import {sharedStyles} from '../../../components/battery-square/battery-square-styles'
 
@@ -6,15 +6,26 @@ import {sharedStyles} from '../../../components/battery-square/battery-square-st
 export class PanelBatterysquare extends LitElement {
   render() {
     return html`
-      <star-batterysquare></star-batterysquare>
-      <!-- <star-batterysquare blue></star-batterysquare> -->
-      <!-- <star-batterysquare deep></star-batterysquare> -->
-      <!-- <star-batterysquare deep blue></star-batterysquare> -->
+      <div id="container">
+        <star-batterysquare></star-batterysquare>
+      </div>
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [sharedStyles]
+    return [
+      sharedStyles,
+      css`
+        :host {
+          height: 100vh;
+          width: 100vw;
+        }
+        #container {
+          height: 31.01vh;
+          width: 26.145vw;
+        }
+      `,
+    ]
   }
 }
 
diff --git a/src/test/panels/battery/battery.ts b/src/test/panels/battery/battery.ts
index f02dae4..9151bb0 100644
--- a/src/test/panels/battery/battery.ts
+++ b/src/test/panels/battery/battery.ts
@@ -8,9 +8,9 @@ export class PanelBattery extends LitElement {
   @query('star-battery') battery!: HTMLElement
   render() {
     return html`
-      <star-battery charge></star-battery>
-      <!-- <star-battery deep></star-battery> -->
-      <!-- <star-battery charge></star-battery> -->
+      <div id="container">
+        <star-battery charge></star-battery>
+      </div>
     `
   }
 
@@ -29,8 +29,8 @@ export class PanelBattery extends LitElement {
           width: 100vw;
         }
         #container {
-          height: 100vh;
-          width: 100vw;
+          height: 60vh;
+          width: 50vw;
         }
       `,
     ]
diff --git a/src/test/panels/iconfont/REMEAD.md b/src/test/panels/iconfont/REMEAD.md
new file mode 100644
index 0000000..04b8260
--- /dev/null
+++ b/src/test/panels/iconfont/REMEAD.md
@@ -0,0 +1,36 @@
+# iconfont字体库
+## 介绍
+iconfont字体库支持多色图标字体，可通过Unicode、fontclass和symbol三种方式进行引用。
+## iconfont使用方法
+> Unicode 引用
+```
+第一步：设置@font-face
+
+@font-face {
+  font-family: "iconfont-signal";
+  src: 
+       url('iconfont-signal.ttf?t=1667956429504') format('truetype');
+}
+
+第二步：定义样式，如
+
+.iconfont {
+  font-family: "iconfont-signal" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+第三步：挑选相应图标并获取字体编码，应用于页面（字体编码可在iconfont.json文件中查询）
+
+<span class="iconfont">&#x33;</span>
+
+> Symbol使用方式
+在需要图标处通过xlink方式链接到ffont.symbol.svg，以‘#ffont’+图表名称 的方式调用对应图标
+```
+<svg class="icon" aria-hidden="true">
+  <use xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-QQ"></use>
+</svg>
+
+```
\ No newline at end of file
diff --git a/src/test/panels/iconfont/ffont.symbol.svg b/src/test/panels/iconfont/ffont.symbol.svg
new file mode 100644
index 0000000..f646ff8
--- /dev/null
+++ b/src/test/panels/iconfont/ffont.symbol.svg
@@ -0,0 +1,663 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" style="display:none;">
+  <symbol viewBox="0 0 32 32" id="ffont-QQ">
+    <g clip-path="url(#clip0_2073_78773)">
+      <path d="M25.31 18.4088C24.8345 16.9311 24.2877 15.6892 23.4466 13.6567C23.5774 8.31804 21.283 4 15.9987 4C10.655 4 8.41117 8.40428 8.55383 13.6567C7.70977 15.692 7.1659 16.9254 6.69037 18.4088C5.67989 21.5568 6.00681 22.8591 6.25646 22.8878C6.79142 22.9511 8.33984 20.5189 8.33984 20.5189C8.33984 21.9276 9.08879 23.7647 10.7115 25.09C9.9269 25.3228 8.16449 25.9495 8.58355 26.6366C8.92236 27.1915 14.4146 26.9902 15.9987 26.8178C17.5828 26.9902 23.0751 27.1915 23.4139 26.6366C23.833 25.9524 22.0676 25.3228 21.2859 25.09C22.9087 23.7618 23.6576 21.9247 23.6576 20.5189C23.6576 20.5189 25.206 22.9511 25.741 22.8878C25.9936 22.8562 26.3205 21.5539 25.31 18.4088Z" fill="#4D4D4D"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_2073_78773">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-add">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 17V26H17V17H26V15H17V6H15V15H6V17H15Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-airplane">
+    <path opacity="0.95" fill-rule="evenodd" clip-rule="evenodd" d="M10 22L13 26L14 25L13 21L17.474 16.707L22 25L23 24L21 13L25.4171 8.77022C26.1108 8.07653 26.2233 7.12661 25.5483 6.45167C24.8734 5.77673 23.9235 5.88922 23.2298 6.58291L19 11L8 9L7 10L15.293 14.526L11 19L7 18L6 19L10 22Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-alarm-clock">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.6377V17.6667L20.5 21L21.5 19.5L17 16.7377V10.6377H15Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 17C8 21.4524 11.5476 25 16 25C20.4524 25 24 21.4524 24 17C24 12.5476 20.4524 9 16 9C11.5476 9 8 12.5476 8 17ZM16 27C10.443 27 6 22.557 6 17C6 11.443 10.443 7 16 7C21.557 7 26 11.443 26 17C26 22.557 21.557 27 16 27Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M26.3594 10.7684L20.3594 5.76838L21.6397 4.23193L27.6397 9.23193L26.3594 10.7684Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.64062 10.7684L11.6406 5.76838L10.3603 4.23193L4.36026 9.23193L5.64062 10.7684Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-alarm-stop">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C15.4477 4 15 4.44772 15 5V6C11.6863 6 8.99985 8.68629 8.99985 12V17.7458C8.99985 18.2376 8.85429 18.7183 8.58152 19.1275L7.66395 20.5038C6.95264 21.5708 7.71751 23 8.99985 23H22.9999C24.2822 23 25.0471 21.5708 24.3358 20.5038L23.4182 19.1275C23.1454 18.7183 22.9999 18.2376 22.9999 17.7458V12C22.9999 8.68634 20.3136 6.00008 17 6V5C17 4.44772 16.5523 4 16 4ZM14.9999 8H16.9999C19.209 8 20.9999 9.79086 20.9999 12V17.7458C20.9999 18.6324 21.2623 19.4992 21.7541 20.2369L22.2628 21H9.73689L10.2456 20.2369C10.7374 19.4992 10.9999 18.6324 10.9999 17.7458V12C10.9999 9.79086 12.7907 8 14.9999 8Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.1001 6.20006C23.5419 6.53143 23.6314 7.15823 23.3001 7.60006L9.80006 25.6001C9.46869 26.0419 8.84189 26.1314 8.40006 25.8001C7.95823 25.4687 7.86869 24.8419 8.20006 24.4001L21.7001 6.40006C22.0314 5.95823 22.6582 5.86869 23.1001 6.20006Z" fill="#333333"></path>
+    <path d="M13 24C13 25.6569 14.3431 27 16 27C17.6569 27 19 25.6569 19 24H13Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-alarm">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C15.4477 4 15 4.44772 15 5V6C11.6863 6 8.99985 8.68629 8.99985 12V17.7458C8.99985 18.2376 8.85429 18.7183 8.58152 19.1275L7.66395 20.5038C6.95264 21.5708 7.71751 23 8.99985 23H22.9999C24.2822 23 25.0471 21.5708 24.3358 20.5038L23.4182 19.1275C23.1454 18.7183 22.9999 18.2376 22.9999 17.7458V12C22.9999 8.68634 20.3136 6.00008 17 6V5C17 4.44772 16.5523 4 16 4ZM14.9999 8H16.9999C19.209 8 20.9999 9.79086 20.9999 12V17.7458C20.9999 18.6324 21.2623 19.4992 21.7541 20.2369L22.2628 21H9.73689L10.2456 20.2369C10.7374 19.4992 10.9999 18.6324 10.9999 17.7458V12C10.9999 9.79086 12.7907 8 14.9999 8Z" fill="#333333"></path>
+    <path d="M13 24C13 25.6569 14.3431 27 16 27C17.6569 27 19 25.6569 19 24H13Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-call">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.4594 26.9915C25.636 26.9915 26.6187 24.0167 26.8226 23.3214C27.2199 21.9674 26.9115 21.7582 26.279 21.4498L22.1233 19.0397C21.7573 18.8253 20.9733 18.8096 20.6439 19.1181C20.3198 19.4265 20.0219 19.7664 19.7501 20.1323C19.4783 20.4931 19.1907 20.8329 18.8823 21.1413C18.5792 21.4498 18.323 21.6484 18.1348 21.6066C17.4657 21.455 15.3539 20.5924 12.8971 18.1352C10.3305 15.563 9.3948 13.4509 9.42617 12.902C9.43662 12.7085 9.57776 12.4576 9.8914 12.1544C10.1998 11.8511 10.5344 11.5636 10.9003 11.2918C11.2662 11.0199 11.7471 10.5494 11.9091 10.3925C12.2698 10.037 12.0816 8.82413 11.8621 8.4634L9.59867 4.75674C9.03412 3.75296 8.43298 3.94639 7.70639 4.21825C6.97979 4.49011 5.56842 5.32136 4.85751 6.54994C4.4916 7.18776 4.15705 8.32224 4.0316 9.54037C4.0316 9.56128 4.02637 9.58219 4.02637 9.60833C4.00024 10.5285 3.37819 14.6011 10.0221 21.0054C16.7287 27.4829 21.1667 26.9915 21.4594 26.9915Z" fill="#4D4D4D"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-close">
+    <g clip-path="url(#clip0_6482_261825)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L16 14.5858L24.2929 6.29289C24.6834 5.90237 25.3166 5.90237 25.7071 6.29289C26.0976 6.68342 26.0976 7.31658 25.7071 7.70711L17.4142 16L25.7071 24.2929C26.0976 24.6834 26.0976 25.3166 25.7071 25.7071C25.3166 26.0976 24.6834 26.0976 24.2929 25.7071L16 17.4142L7.70711 25.7071C7.31658 26.0976 6.68342 26.0976 6.29289 25.7071C5.90237 25.3166 5.90237 24.6834 6.29289 24.2929L14.5858 16L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6482_261825">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-fix-to-dock">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M20.7003 16.81C21.0803 16.44 21.1003 15.85 20.7503 15.45C20.4003 15.06 19.8003 14.99 19.3703 15.3L19.2603 15.4L17.0103 17.61V6C17.0103 5.45 16.5503 5 15.9903 5C15.4203 5 14.9703 5.45 14.9703 6V17.58L12.7403 15.4C12.3903 15.05 11.8203 15 11.4103 15.3L11.3003 15.4C10.9403 15.75 10.9003 16.3 11.2003 16.7L11.3003 16.81L15.2803 20.71C15.6403 21.06 16.2003 21.1 16.6103 20.8L16.7203 20.71L20.7003 16.81Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C5.89543 12 5 12.8954 5 14V24C5 25.1046 5.89543 26 7 26H25C26.1046 26 27 25.1046 27 24V14C27 12.8954 26.1046 12 25 12H20V10H25C27.2091 10 29 11.7909 29 14V24C29 26.2091 27.2091 28 25 28H7C4.79086 28 3 26.2091 3 24V14C3 11.7909 4.79086 10 7 10H12V12H7Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 6 32" id="ffont-flow-down">
+    <path opacity="0.4" d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
+    <path d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 6 32" id="ffont-flow-none">
+    <path opacity="0.4" d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
+    <path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 6 32" id="ffont-flow-up">
+    <path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
+    <path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 6 32" id="ffont-flow-updown">
+    <path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
+    <path d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-hot-spot">
+    <path d="M7.76429 7.75C7.49142 7.75 7.23305 7.85499 7.03431 8.04661L7.03351 8.04738C4.91221 10.1108 3.75 12.8604 3.75 15.8057V15.817C3.75 18.7405 4.92372 21.4895 7.03304 23.5521L7.03431 23.5534C7.23305 23.745 7.49142 23.85 7.76429 23.85C8.04881 23.85 8.30724 23.7445 8.51655 23.5416C8.72401 23.3413 8.8217 23.0695 8.8217 22.7956C8.8217 22.511 8.70599 22.2461 8.51173 22.0444L8.50608 22.0387C6.79748 20.3749 5.86483 18.1622 5.86483 15.8057C5.86483 13.4378 6.79746 11.2253 8.50568 9.56163C8.70836 9.36596 8.8217 9.09667 8.8217 8.80436C8.8217 8.53173 8.72492 8.26118 8.51943 8.06117C8.31539 7.8512 8.0422 7.75 7.76429 7.75Z" fill="#4D4D4D"></path>
+    <path d="M24.2358 7.75C23.9556 7.75 23.6956 7.85265 23.4945 8.05813C23.2752 8.25918 23.1784 8.53202 23.1784 8.80436C23.1784 9.08897 23.2941 9.35385 23.4883 9.55556L23.494 9.56124C25.2025 11.225 26.1352 13.4376 26.1352 15.8057C26.1352 18.162 25.2028 20.3743 23.4946 22.0381C23.2918 22.2338 23.1784 22.5032 23.1784 22.7956C23.1784 23.0666 23.2742 23.3381 23.4912 23.5388C23.6874 23.7518 23.9627 23.85 24.2358 23.85C24.5145 23.85 24.7766 23.7482 24.9693 23.55C27.0888 21.4868 28.2501 18.7384 28.2501 15.7943C28.2501 12.8615 27.0887 10.1131 24.9693 8.05002C24.7753 7.85051 24.5018 7.75 24.2358 7.75Z" fill="#4D4D4D"></path>
+    <path d="M11.0415 10.4641C10.7766 10.4641 10.5302 10.5712 10.3448 10.7488L10.3422 10.7513C8.98559 12.0895 8.22744 13.8868 8.22744 15.8008C8.22744 17.7141 8.9851 19.4991 10.3401 20.8368C10.5342 21.0369 10.7865 21.1261 11.0415 21.1261C11.2875 21.1261 11.5362 21.0359 11.7273 20.8527C11.9146 20.6732 12.0335 20.4168 12.0335 20.1511C12.0335 19.8822 11.9314 19.6334 11.7256 19.4477C10.7399 18.476 10.2004 17.1714 10.2004 15.7894C10.2004 14.4081 10.7395 13.1145 11.7256 12.1425C11.9329 11.9553 12.0335 11.6945 12.0335 11.4391C12.0335 11.1734 11.9146 10.917 11.7273 10.7375C11.5375 10.5556 11.3004 10.4641 11.0415 10.4641Z" fill="#4D4D4D"></path>
+    <path d="M20.9677 10.4641C20.718 10.4641 20.4665 10.5498 20.2816 10.7376C20.0757 10.9247 19.9758 11.1845 19.9758 11.4391C19.9758 11.695 20.0765 11.9536 20.2698 12.1395C21.2577 13.1119 21.7979 14.4067 21.7979 15.7894C21.7979 17.1727 21.2573 18.4786 20.2698 19.4506C20.0779 19.6351 19.9758 19.8818 19.9758 20.1511C19.9758 20.4057 20.0757 20.6655 20.2816 20.8526C20.4665 21.0404 20.718 21.1261 20.9677 21.1261C21.2296 21.1261 21.4792 21.021 21.6578 20.8372C23.0245 19.499 23.7818 17.7023 23.7818 15.7894C23.7818 13.8892 23.0255 12.0939 21.6611 10.7562C21.4747 10.551 21.2187 10.4641 20.9677 10.4641Z" fill="#4D4D4D"></path>
+    <circle cx="16" cy="16" r="2" fill="#4D4D4D"></circle>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-info">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 4C9.37226 4 4 9.37226 4 16C4 22.6277 9.37226 28 16 28C22.6277 28 28 22.6277 28 16C28 9.37226 22.6277 4 16 4ZM2 16C2 8.26769 8.26769 2 16 2C23.7323 2 30 8.26769 30 16C30 23.7323 23.7323 30 16 30C8.26769 30 2 23.7323 2 16Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16 9C15.175 9 14.5 9.675 14.5 10.5C14.5 11.325 15.175 12 16 12C16.825 12 17.5 11.325 17.5 10.5C17.5 9.675 16.825 9 16 9Z" fill="#333333"></path>
+    <rect x="15" y="13" width="2" height="10" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-location">
+    <g clip-path="url(#clip0_6482_301011)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00202 23.7834C6.00999 23.7605 6.03721 23.7045 6.12335 23.6134C6.27197 23.4564 6.5387 23.2603 6.96126 23.0508C7.8035 22.6331 9.0725 22.2557 10.6667 21.9862L10.3333 20.0142C8.63959 20.3005 7.15859 20.7206 6.07281 21.2589C5.53136 21.5274 5.03957 21.8489 4.67067 22.2388C4.29718 22.6334 4 23.1552 4 23.7851C4 24.7259 4.64614 25.4102 5.29594 25.8592C5.97631 26.3294 6.89546 26.7127 7.94128 27.0183C10.0462 27.6335 12.8951 28.0002 16 28.0002C19.1049 28.0002 21.9538 27.6335 24.0587 27.0183C25.1045 26.7127 26.0237 26.3294 26.7041 25.8592C27.3539 25.4102 28 24.7259 28 23.7851C28 23.1552 27.7028 22.6334 27.3293 22.2388C26.9604 21.8489 26.4686 21.5274 25.9272 21.2589C24.8414 20.7206 23.3604 20.3005 21.6667 20.0142L21.3333 21.9862C22.9275 22.2557 24.1965 22.6331 25.0387 23.0508C25.4613 23.2603 25.728 23.4564 25.8766 23.6134C25.9628 23.7045 25.99 23.7605 25.998 23.7834C25.986 23.8191 25.9189 23.9707 25.5671 24.2139C25.1342 24.513 24.4424 24.8225 23.4976 25.0987C21.6213 25.6471 18.9702 26.0002 16 26.0002C13.0298 26.0002 10.3787 25.6471 8.50237 25.0987C7.55759 24.8225 6.86582 24.513 6.43293 24.2139C6.0811 23.9707 6.01395 23.8191 6.00202 23.7834ZM5.99902 23.7953C5.99888 23.7953 5.999 23.7937 5.9998 23.7906C5.99956 23.7937 5.99916 23.7953 5.99902 23.7953ZM26.001 23.7953C26.0008 23.7953 26.0004 23.7937 26.0002 23.7906C26.001 23.7937 26.0011 23.7953 26.001 23.7953Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12.255C22 8.74 19.2556 6 16 6C12.7444 6 10 8.74 10 12.255C10 13.3894 10.4217 14.6897 11.5302 16.321C12.5186 17.7757 13.9889 19.3994 16 21.2883C18.0111 19.3994 19.4814 17.7757 20.4698 16.321C21.5783 14.6897 22 13.3894 22 12.255ZM15.4682 23.52C10.5129 19.01 8 15.585 8 12.255C8 7.695 11.5812 4 16 4C20.4188 4 24 7.695 24 12.255C24 15.585 21.4871 19.01 16.5318 23.52L16 24L15.4682 23.52Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 10.896 17.104 10 16 10C14.896 10 14 10.896 14 12C14 13.104 14.896 14 16 14C17.104 14 18 13.104 18 12Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6482_301011">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-message">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63637 5C4.62806 5 3 6.62806 3 8.63637V17.3636C3 19.3719 4.62806 21 6.63637 21H8V27C10.8619 23.9067 15.2336 22.0316 18.9127 21H24.3636C26.3719 21 28 19.3719 28 17.3636V8.63637C28 6.62806 26.3719 5 24.3636 5H6.63637Z" fill="#4D4D4D"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-mobile-data">
+    <path d="M10.9083 5.27766L4.58594 11.3304L5.96901 12.7751L11 7.95863V27.0003H13V6.00033C13 5.44804 12.5523 5.00033 12 5.00033C11.9317 5.00033 11.8649 5.00718 11.8004 5.02024C11.4899 4.95694 11.1545 5.04192 10.9083 5.27766Z" fill="#333333"></path>
+    <path d="M20.9404 26.3409C20.801 26.7253 20.4326 27 20 27C19.4477 27 19 26.5523 19 26V5H21V23.6333L26.2312 18.6251L27.6143 20.0698L21.2919 26.1226C21.1878 26.2222 21.0678 26.295 20.9404 26.3409Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-more">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 14C4.675 14 4 14.675 4 15.5C4 16.325 4.675 17 5.5 17C6.325 17 7 16.325 7 15.5C7 14.675 6.325 14 5.5 14ZM15.5 14C14.675 14 14 14.675 14 15.5C14 16.325 14.675 17 15.5 17C16.325 17 17 16.325 17 15.5C17 14.675 16.325 14 15.5 14ZM24 15.5C24 14.675 24.675 14 25.5 14C26.325 14 27 14.675 27 15.5C27 16.325 26.325 17 25.5 17C24.675 17 24 16.325 24 15.5Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-no-see">
+    <path d="M15.3458 17.2035C15.3458 16.8218 15.6277 16.5095 15.9723 16.5095H16.4171C16.7617 16.5095 17.0436 16.8218 17.0436 17.2035V21.1241C17.0436 21.5058 16.7617 21.8181 16.4171 21.8181H15.9723C15.6277 21.8181 15.3458 21.5058 15.3458 21.1241V17.2035ZM7.06042 14.5978C7.30475 14.3306 7.70571 14.3341 7.95004 14.6012L8.26642 14.9517C8.51075 15.2223 8.50762 15.6595 8.26329 15.9301L5.38769 19.0597C5.14336 19.3269 4.7424 19.3234 4.49807 19.0562L4.18169 18.7058C3.93736 18.4352 3.94049 17.998 4.18482 17.7274L7.06042 14.5978ZM24.8935 14.2855C24.6492 14.0149 24.2514 14.0149 24.007 14.2855L23.6907 14.6359C23.4463 14.9066 23.4463 15.3472 23.6907 15.6178L26.4472 18.678C26.6915 18.9487 27.0894 18.9487 27.3337 18.678L27.6501 18.3276C27.8944 18.057 27.8944 17.6163 27.6501 17.3457L24.8935 14.2855ZM20.8151 15.6109C20.6428 15.2778 20.2606 15.1633 19.963 15.3541L19.5777 15.6005C19.2801 15.7913 19.1736 16.2181 19.3459 16.5512L21.4697 20.6696C21.642 21.0027 22.0242 21.1172 22.3218 20.9264L22.7071 20.68C23.0046 20.4892 23.1111 20.0624 22.9389 19.7293L20.8151 15.6109ZM11.4678 16.0793C11.6401 15.7497 12.0254 15.6352 12.323 15.826L12.7082 16.0724C13.0058 16.2632 13.1092 16.6899 12.9369 17.0196L10.9227 20.8847C10.7505 21.2143 10.3652 21.3288 10.0676 21.138L9.68229 20.8917C9.38471 20.7008 9.28134 20.2741 9.45362 19.9445L11.4678 16.0793Z" fill="#333333" stroke="#333333" stroke-width="0.3"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.30202 12.4432L3.13285 12.5499L3.13219 12.5488L3.13041 12.546L3.12515 12.5372C3.12093 12.5301 3.11535 12.5203 3.1088 12.5082C3.09574 12.4841 3.07867 12.4501 3.06091 12.4082C3.02577 12.3253 2.986 12.2067 2.972 12.0688C2.95791 11.9299 2.96965 11.7675 3.04214 11.6036C3.1152 11.4385 3.24428 11.2847 3.44424 11.1561C3.64381 11.0275 3.83745 10.9759 4.01843 10.9825C4.19762 10.989 4.34897 11.0517 4.46737 11.127C4.58508 11.2019 4.67453 11.2918 4.73383 11.3611C4.76382 11.3961 4.787 11.427 4.80308 11.4497C4.81114 11.4611 4.81748 11.4705 4.82205 11.4775L4.82639 11.4843C5.52982 12.4968 6.97932 13.3997 8.9455 14.0493C10.9067 14.6972 13.3537 15.0836 16.0121 15.0836C18.6704 15.0836 21.1174 14.6972 23.0786 14.0493C25.0454 13.3995 26.4952 12.4962 27.1984 11.4833L27.2041 11.4747C27.2089 11.4678 27.2154 11.4585 27.2237 11.4473C27.2401 11.4251 27.2639 11.3951 27.2946 11.3614C27.3552 11.2949 27.4471 11.2096 27.5685 11.1428C27.6913 11.0753 27.8466 11.0257 28.0282 11.0372C28.2101 11.0488 28.4018 11.1207 28.5984 11.2692C28.9549 11.5382 29.0469 11.8538 29.0319 12.112C29.0248 12.2352 28.9939 12.339 28.9652 12.4117C28.9507 12.4483 28.9365 12.4779 28.9254 12.4992C28.9198 12.5099 28.915 12.5185 28.9112 12.525L28.9064 12.5331L28.9047 12.5359L28.9035 12.5379L28.8975 12.5468C27.9219 13.9188 26.1647 15.076 23.9323 15.89C21.696 16.7054 18.9643 17.1836 16.0152 17.1836C13.0691 17.1836 10.3405 16.707 8.10582 15.8939C5.87506 15.0822 4.11802 13.9282 3.13933 12.5595L3.13285 12.5499C3.13292 12.55 3.13441 12.55 3.30202 12.4432Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-personalization">
+    <path d="M25.6155 7.64575L18.1967 3.56921C16.8165 2.81039 15.1687 2.81039 13.7886 3.56921L6.38207 7.64575C4.9209 8.44632 4.00737 9.97871 4 11.6486V19.5045C4.00982 21.1695 4.92336 22.6995 6.38207 23.5L13.8009 27.5766C14.4909 27.9572 15.2473 28.1463 16.0061 28.1463C16.7625 28.1463 17.5213 27.9572 18.2114 27.5766L25.6204 23.5C27.0791 22.6995 27.9926 21.1695 28 19.4996V11.6412C27.9902 9.97625 27.0766 8.44387 25.6155 7.64575ZM14.5 5.50009C14.9248 5.2668 15.5334 5.00009 16 5.00009C16.4666 5.00009 17.0752 5.2668 17.5 5.50009L24 9.00009C24.1768 9.09587 24.8527 9.51616 25 9.64631L16 14.5001L7 9.64631C7.14734 9.51862 7.82319 9.09832 8 9.00009L14.5 5.50009ZM7.5 22.0001C6.59874 21.5065 6.00491 20.5261 6 19.5045V12.0001C6 11.8516 6 11.5001 6.5 11.5001L15 16.0935V26.0368C14.8379 25.9828 14.1547 25.5836 14 25.5001L7.5 22.0001ZM26 19.5045C25.9951 20.531 25.8988 21.0065 25 21.5001L18 25.5001C17.8428 25.586 17.167 25.9461 17 26.0001V16.0001L25.6155 11.5001C26 11.5001 26 11.6412 26 12.0001V19.5045Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-right">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6863 15.8995L11.8934 6.1066L13.3076 4.69238L23.8076 15.1924C24.1981 15.5829 24.1981 16.2161 23.8076 16.6066L13.3076 27.1066L11.8934 25.6924L21.6863 15.8995Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-screen">
+    <path d="M7 9H10V12H7V9Z" fill="#333333"></path>
+    <path d="M7 15H10V18H7V15Z" fill="#333333"></path>
+    <path d="M15 9H12V12H15V9Z" fill="#333333"></path>
+    <path d="M12 15H15V18H12V15Z" fill="#333333"></path>
+    <path d="M20 9H17V12H20V9Z" fill="#333333"></path>
+    <path d="M17 15H20V18H17V15Z" fill="#333333"></path>
+    <path d="M25 9H22V12H25V9Z" fill="#333333"></path>
+    <path d="M22 15H25V18H22V15Z" fill="#333333"></path>
+    <path d="M21 21H11V23H21V21Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H26C28.7614 4 31 6.23858 31 9V23C31 25.7614 28.7614 28 26 28H6C3.23858 28 1 25.7614 1 23V9C1 6.23858 3.23858 4 6 4ZM6 6C4.34315 6 3 7.34315 3 9V23C3 24.6569 4.34315 26 6 26H26C27.6569 26 29 24.6569 29 23V9C29 7.34315 27.6569 6 26 6H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-settings">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6765 2.61024C14.3941 2.20083 15.2054 2 16 2C16.7946 2 17.6059 2.20083 18.3235 2.61024C18.3244 2.61075 18.3253 2.61125 18.3261 2.61176L27.3097 7.67811C27.3099 7.67821 27.3095 7.67801 27.3097 7.67811C28.3405 8.2573 29 9.33285 29 10.52V21.48C29 22.6674 28.3408 23.7428 27.3097 24.3219L18.3261 29.3882C18.3253 29.3888 18.3244 29.3893 18.3235 29.3898C17.6059 29.7992 16.7946 30 16 30C15.2054 30 14.3941 29.7992 13.6765 29.3898C13.6756 29.3893 13.6747 29.3888 13.6739 29.3882L4.69031 24.3219C4.69024 24.3219 4.69037 24.3219 4.69031 24.3219C3.65929 23.7427 3 22.6673 3 21.48V10.52C3 9.33299 3.65879 8.25786 4.68941 7.67861C4.68971 7.67844 4.69001 7.67827 4.69031 7.67811L13.6765 2.61024ZM16 4C15.5356 4 15.0679 4.11867 14.6661 4.34824L14.6612 4.35105L5.66969 9.42189C5.24082 9.66277 5 10.0874 5 10.52V21.48C5 21.9126 5.24083 22.3372 5.66969 22.5781L5.67123 22.579L14.6661 27.6517C15.0679 27.8813 15.5356 28 16 28C16.4644 28 16.9321 27.8813 17.3339 27.6518L17.3388 27.649L26.3303 22.5781C26.7592 22.3372 27 21.9126 27 21.48V10.52C27 10.0874 26.7592 9.66277 26.3303 9.42189L17.3339 4.34826C16.9321 4.11869 16.4644 4 16 4Z" fill="#333333"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 16C11 13.2377 13.2377 11 16 11C18.7623 11 21 13.2377 21 16C21 18.7623 18.7623 21 16 21C13.2377 21 11 18.7623 11 16ZM16 13C14.3423 13 13 14.3423 13 16C13 17.6577 14.3423 19 16 19C17.6577 19 19 17.6577 19 16C19 14.3423 17.6577 13 16 13Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-0">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-1">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2g-0">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261243)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261243">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2g-1">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261263)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261263">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2g-2">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261283)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261283">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2g-3">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261363)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261363">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-2g-4">
+    <rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261403)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path d="M8.2459 5.81621L8.23466 5.80808C8.25495 5.79666 8.27494 5.78478 8.29463 5.77246C8.7059 5.39821 8.93227 5.05819 9 4.49988C8.99994 3.67151 8.32839 3 7.5 3C6.67157 3 6 3.67157 6 4.5L4 4.49999C4 4.15251 4.05064 3.81685 4.14494 3.5C4.57522 2.05425 5.91449 1 7.5 1C9.43296 1 10.9999 2.56694 11 4.49988C11 4.49992 11 4.49984 11 4.49988C10.9991 4.51292 10.9257 5.54176 9.99544 6.44852L7 8.99988H11V10.9999H4V8.99988L7 6.81621C7.21076 6.64533 7.40355 6.49451 7.57907 6.35722C7.83832 6.15442 8.05987 5.98111 8.2459 5.81621Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261403">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3g-0">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261303)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261303">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3g-1">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261323)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261323">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3g-2">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261343)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261343">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3g-3">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261383)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261383">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-3g-4">
+    <rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261423)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50002 6.5L5.00002 5.5L8.50002 3H4.99999L5 1H11V3L9.17033 4.4231C10.2606 5.016 11.0007 6.17155 11.0007 7.49994C11.0007 9.43294 9.43369 10.9999 7.50069 10.9999C6.10449 10.9999 4.89924 10.1824 4.3375 8.99994C4.18983 8.68909 4.08664 8.35302 4.03613 7.99994H6.08604C6.29196 8.58254 6.84758 8.99994 7.50069 8.99994C8.32912 8.99994 9.00069 8.32837 9.00069 7.49994C9.00069 6.86089 8.60106 6.31517 8.03807 6.09907C7.87124 6.03504 7.69006 5.99994 7.50069 5.99994C7.38278 5.99994 7.26806 6.01355 7.15799 6.03927C7.14578 6.04212 7.13362 6.04513 7.12153 6.04828C7.09993 6.0539 7.07852 6.06 7.05731 6.06655L6.50002 6.5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261423">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-4">
+    <rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-5g-0">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261205)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261205">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-5g-1">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261169)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261169">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-5g-2">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261187)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261187">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-5g-3">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261133)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261133">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-5g-4">
+    <rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6476_261151)">
+      <path d="M16 9C17.1046 9 18 8.10457 18 7H16V5H20V7C20 9.20914 18.2091 11 16 11C13.7909 11 12 9.20914 12 7V5C12 2.79086 13.7909 1 16 1C17.566 1 18.9218 1.89989 19.5785 3.21075L17.7892 4.10538C17.4609 3.44994 16.783 3 16 3C14.8954 3 14 3.89543 14 5V7C14 8.10457 14.8954 9 16 9Z" fill="#333333"></path>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1L4.02649 6.84106C4.01647 6.89364 4.00763 6.94662 4 7H6.04991C6.16871 6.66387 6.40392 6.38273 6.70711 6.20501C6.92941 6.0747 7.18826 6 7.46456 6C8.29298 6 8.96456 6.67157 8.96456 7.5C8.96456 8.32843 8.29298 9 7.46456 9C7.09598 9 6.75846 8.86707 6.49731 8.64653C6.29571 8.47628 6.13962 8.25382 6.04991 8C6.02524 7.93019 6.00558 7.85802 5.99139 7.7839L4.23043 8.84047C4.75652 10.1083 6.0064 11 7.46456 11C9.39755 11 10.9646 9.433 10.9646 7.5C10.9646 5.567 9.39755 4 7.46456 4C7.21286 4 6.96737 4.02657 6.73074 4.07705L7 3H10V1H5Z" fill="#333333"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6476_261151">
+        <rect width="16" height="10" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-e-0">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-e-1">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-e-2">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-e-3">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-e-4">
+    <rect x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <path d="M6 3V5H11V7H6V9H11V11H4V1H11V3H6Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-signal-open-card">
+    <rect opacity="0.4" x="23" y="7" width="3" height="18" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="17" y="12" width="3" height="13" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="11" y="15" width="3" height="10" rx="1" fill="#333333"></rect>
+    <rect opacity="0.4" x="5" y="19" width="3" height="6" rx="1" fill="#333333"></rect>
+    <g clip-path="url(#clip0_6455_260737)">
+      <path d="M9.97765 5C9.97765 6.10457 9.08222 7 7.97765 7C7.61336 7 7.27182 6.90261 6.97765 6.73244V8.87398C7.29727 8.95625 7.63235 9 7.97765 9C10.1868 9 11.9776 7.20914 11.9776 5C11.9776 2.79086 10.1868 1 7.97765 1C5.9122 1 4.21238 2.56547 4 4.57462L5.98262 4.85785C6.05553 3.81962 6.92087 3 7.97765 3C9.08222 3 9.97765 3.89543 9.97765 5Z" fill="#333333"></path>
+      <rect x="6.97754" y="7" width="2" height="4" fill="#333333"></rect>
+      <circle cx="7.97754" cy="13" r="1" fill="#333333"></circle>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260737">
+        <rect width="8" height="13" fill="white" transform="translate(4 1)"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 6 32" id="ffont-signal-roaming">
+    <path d="M2.8285 9.28583C2.90618 9.15636 3.09382 9.15636 3.1715 9.28583L5.81826 13.6971C5.89824 13.8304 5.80222 14 5.64676 14H0.353238C0.197779 14 0.101757 13.8304 0.181739 13.6971L2.8285 9.28583Z" fill="#333333"></path>
+    <path opacity="0.4" d="M2.8285 22.7142C2.90618 22.8436 3.09382 22.8436 3.1715 22.7142L5.81826 18.3029C5.89824 18.1696 5.80222 18 5.64676 18H0.353238C0.197779 18 0.101757 18.1696 0.181739 18.3029L2.8285 22.7142Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-skip-forward">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8.13C5 7.01 5.95 6.1 7.12 6.1C7.54 6.1 7.95 6.22 8.3 6.44L20.76 14.38C20.83 14.42 20.89 14.47 20.95 14.52V7.75C20.95 6.23 22.18 5 23.7 5H24.25C25.77 5 27 6.23 27 7.75V24.25C27 25.77 25.77 27 24.25 27H23.7C22.18 27 20.95 25.77 20.95 24.25V16.87C20.91 16.91 20.86 16.94 20.81 16.97L8.36 25.52C7.41 26.17 6.08 25.96 5.4 25.06C5.14 24.71 5 24.3 5 23.87V8.13Z" fill="black"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-tick">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M28.6762 6.26329C29.0831 6.63675 29.1102 7.26934 28.7367 7.67621L13.1329 24.6762C12.9534 24.8718 12.7035 24.9879 12.4383 24.9991C12.1731 25.0103 11.9143 24.9156 11.719 24.7358L3.32282 17.0085C2.91644 16.6345 2.89019 16.0019 3.2642 15.5955C3.6382 15.1892 4.27082 15.1629 4.67719 15.5369L12.3366 22.5861L27.2633 6.3238C27.6368 5.91692 28.2693 5.88984 28.6762 6.26329Z" fill="#333333"></path>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wechat">
+    <g clip-path="url(#clip0_2073_78772)">
+      <path d="M20.6008 11.6559C20.8994 11.6559 21.1945 11.6796 21.486 11.7142C20.6904 7.86268 16.7262 5 12.2017 5C7.14333 5 3 8.58154 3 13.1301C3 15.7556 4.37877 17.9103 6.68315 19.5834L5.7628 22.4589L8.97875 20.7839C10.1309 21.0211 11.0548 21.2638 12.2017 21.2638C12.4915 21.2638 12.7778 21.2492 13.0624 21.2273C12.8759 20.5764 12.7801 19.9012 12.7778 19.2222C12.7778 15.0458 16.2291 11.6577 20.6008 11.6577V11.6559ZM15.653 9.06504C16.3468 9.06504 16.8052 9.53941 16.8052 10.2583C16.8052 10.9753 16.3468 11.4552 15.653 11.4552C14.9645 11.4552 14.2708 10.9753 14.2708 10.2583C14.2708 9.53941 14.9645 9.06504 15.653 9.06504ZM9.21235 11.4552C8.52385 11.4552 7.82832 10.9753 7.82832 10.2583C7.82832 9.53941 8.52385 9.06504 9.21235 9.06504C9.90262 9.06504 10.361 9.53941 10.361 10.2583C10.361 10.9753 9.90437 11.4552 9.21235 11.4552Z" fill="#4D4D4D"></path>
+      <path d="M29.0003 19.1072C29.0003 15.2849 25.3189 12.1704 21.1844 12.1704C16.8057 12.1704 13.3579 15.2849 13.3579 19.1072C13.3579 22.9351 16.8057 26.0441 21.1844 26.0441C22.0995 26.0441 23.0251 25.8051 23.9454 25.5642L26.4694 27.0001L25.7773 24.6118C27.6251 23.1705 29.0003 21.2638 29.0003 19.1072ZM18.6446 17.914C18.188 17.914 17.7243 17.4396 17.7243 16.9561C17.7243 16.4818 18.1862 16.0001 18.6446 16.0001C19.3402 16.0001 19.7968 16.4799 19.7968 16.9561C19.7968 17.4396 19.3402 17.914 18.6446 17.914ZM23.7066 17.914C23.2499 17.914 22.7932 17.4396 22.7932 16.9561C22.7932 16.4818 23.2499 16.0001 23.7066 16.0001C24.3968 16.0001 24.857 16.4799 24.857 16.9561C24.857 17.4396 24.3968 17.914 23.7066 17.914Z" fill="#4D4D4D"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_2073_78772">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-0">
+    <g clip-path="url(#clip0_6455_180119)">
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180119">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-1">
+    <g clip-path="url(#clip0_6455_180097)">
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180097">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-2">
+    <g clip-path="url(#clip0_6455_180073)">
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180073">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-3">
+    <g clip-path="url(#clip0_6455_180051)">
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180051">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-4">
+    <g clip-path="url(#clip0_6455_179951)">
+      <path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_179951">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-lock-0">
+    <g clip-path="url(#clip0_6455_260586)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260586">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-lock-1">
+    <g clip-path="url(#clip0_6455_260553)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260553">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-lock-2">
+    <g clip-path="url(#clip0_6455_260518)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260518">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-lock-3">
+    <g clip-path="url(#clip0_6455_260485)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260485">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-lock-4">
+    <g clip-path="url(#clip0_6455_180141)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M32 21C32 19.8954 31.1046 19 30 19V18.5C30 17.1193 28.8807 16 27.5 16C26.1193 16 25 17.1193 25 18.5V19C23.8954 19 23 19.8954 23 21V24C23 25.1046 23.8954 26 25 26H30C31.1046 26 32 25.1046 32 24V21ZM28.5 18.5V19H26.5V18.5C26.5 17.9477 26.9477 17.5 27.5 17.5C28.0523 17.5 28.5 17.9477 28.5 18.5ZM27.5 21C28.325 21 29 21.675 29 22.5C29 23.325 28.325 24 27.5 24C26.675 24 26 23.325 26 22.5C26 21.675 26.675 21 27.5 21Z" fill="#333333"></path>
+      <path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180141">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-0">
+    <g clip-path="url(#clip0_6455_260708)">
+      <path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
+      <circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path opacity="0.4" d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260708">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-1">
+    <g clip-path="url(#clip0_6455_260679)">
+      <path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
+      <circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path opacity="0.4" d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260679">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-2">
+    <g clip-path="url(#clip0_6455_260648)">
+      <path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
+      <circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path opacity="0.4" d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260648">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-nonet-3">
+    <g clip-path="url(#clip0_6455_260619)">
+      <path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
+      <circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
+      <path opacity="0.4" d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_260619">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+  <symbol viewBox="0 0 32 32" id="ffont-wifi-permissions">
+    <g clip-path="url(#clip0_6455_180178)">
+      <path d="M26.14 16.4935C26.0649 15.6922 26.6952 15 27.5 15C28.3048 15 28.9351 15.6922 28.86 16.4935L28.32 22.2533C28.2803 22.6765 27.9251 23 27.5 23C27.0749 23 26.7197 22.6765 26.68 22.2533L26.14 16.4935Z" fill="#333333"></path>
+      <circle cx="27.5" cy="25" r="1" fill="#333333"></circle>
+      <path d="M26.6513 13.4387C23.9334 10.6976 20.1648 9 15.9997 9C11.8345 9 8.06594 10.6976 5.34799 13.4387L3.2666 11.2772C6.52437 8.01684 11.0265 6 15.9997 6C20.9728 6 25.4749 8.01684 28.7327 11.2772L26.6513 13.4387Z" fill="#333333"></path>
+      <path d="M9.04938 17.2821C10.7001 15.2779 13.2008 14 15.9999 14C18.7991 14 21.2998 15.2779 22.9505 17.2821L25.0419 15.1103C22.8421 12.5914 19.6069 11 15.9999 11C12.393 11 9.15777 12.5914 6.95801 15.1103L9.04938 17.2821Z" fill="#333333"></path>
+      <path d="M12.5715 20.9392C13.2714 19.7772 14.5452 19 16.0005 19C17.4558 19 18.7296 19.7772 19.4294 20.9392L21.5518 18.7352C20.272 17.0719 18.2614 16 16.0005 16C13.7396 16 11.729 17.0719 10.4492 18.7352L12.5715 20.9392Z" fill="#333333"></path>
+      <path d="M13.6836 22.094L16.0004 24.5L18.3173 22.094C17.7671 21.426 16.9335 21 16.0004 21C15.0674 21 14.2338 21.426 13.6836 22.094Z" fill="black"></path>
+    </g>
+    <defs>
+      <clippath id="clip0_6455_180178">
+        <rect width="32" height="32" fill="white"></rect>
+      </clippath>
+    </defs>
+  </symbol>
+</svg>
\ No newline at end of file
diff --git a/src/test/panels/iconfont/iconfont-style.ts b/src/test/panels/iconfont/iconfont-style.ts
new file mode 100644
index 0000000..e09310c
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont-style.ts
@@ -0,0 +1,48 @@
+import {css, CSSResult} from 'lit'
+import './iconfont/iconfont-signal.css'
+import './iconfont/iconfont-wifi.css'
+
+export const iconFontStyles: CSSResult = css`
+  @font-face {
+    font-family: "iconfont-signal"; /* Project id 3582390 */
+    /* Color fonts */
+    src: 
+        url('iconfont.ttf?t=1667956429504') format('truetype');
+  }
+  @font-face {
+    font-family: "iconfont-wifi"; /* Project id 3582390 */
+    /* Color fonts */
+    src: 
+        url('iconfont.ttf?t=1667957389350') format('truetype');
+  }
+  .iconfont-signal {
+    font-family: "iconfont-signal" !important;
+    font-size: 32px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    margin: 0 20px;
+  }
+  .iconfont-wifi {
+    font-family: "iconfont-wifi" !important;
+    font-size: 32px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    margin: 0 20px;
+  }
+  .icon {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+  }
+  h3 {
+    color: red;
+  }
+`
diff --git a/src/test/panels/iconfont/iconfont.ts b/src/test/panels/iconfont/iconfont.ts
new file mode 100644
index 0000000..0631231
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont.ts
@@ -0,0 +1,553 @@
+import {
+  html,
+  LitElement,
+  CSSResultArray,
+} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {iconFontStyles} from './iconfont-style'
+
+@customElement('panel-iconfont')
+export class PanelIconFont extends LitElement {
+  public icondata_signal = {
+    "id": "3582390",
+    "name": "多色-signal",
+    "font_family": "iconfont-signal",
+    "css_prefix_text": "icon-",
+    "description": "",
+    "glyphs": [
+      {
+        "icon_id": "32701896",
+        "name": "flow-none",
+        "font_class": "flow-none",
+        "unicode": "e664",
+        "unicode_decimal": 58980
+      },
+      {
+        "icon_id": "32701897",
+        "name": "flow-down",
+        "font_class": "flow-down",
+        "unicode": "e665",
+        "unicode_decimal": 58981
+      },
+      {
+        "icon_id": "32701898",
+        "name": "flow-up",
+        "font_class": "flow-up",
+        "unicode": "e666",
+        "unicode_decimal": 58982
+      },
+      {
+        "icon_id": "32701899",
+        "name": "flow-updown",
+        "font_class": "flow-updown",
+        "unicode": "e667",
+        "unicode_decimal": 58983
+      },
+      {
+        "icon_id": "32701900",
+        "name": "signal-0",
+        "font_class": "signal-0",
+        "unicode": "e668",
+        "unicode_decimal": 58984
+      },
+      {
+        "icon_id": "32701901",
+        "name": "signal-1",
+        "font_class": "signal-1",
+        "unicode": "e669",
+        "unicode_decimal": 58985
+      },
+      {
+        "icon_id": "32701902",
+        "name": "signal-2",
+        "font_class": "signal-2",
+        "unicode": "e66a",
+        "unicode_decimal": 58986
+      },
+      {
+        "icon_id": "32701903",
+        "name": "signal-2g-0",
+        "font_class": "signal-2g-0",
+        "unicode": "e66b",
+        "unicode_decimal": 58987
+      },
+      {
+        "icon_id": "32701904",
+        "name": "signal-2g-1",
+        "font_class": "signal-2g-1",
+        "unicode": "e66c",
+        "unicode_decimal": 58988
+      },
+      {
+        "icon_id": "32701905",
+        "name": "signal-2g-3",
+        "font_class": "signal-2g-3",
+        "unicode": "e66d",
+        "unicode_decimal": 58989
+      },
+      {
+        "icon_id": "32701906",
+        "name": "signal-2g-2",
+        "font_class": "signal-2g-2",
+        "unicode": "e66e",
+        "unicode_decimal": 58990
+      },
+      {
+        "icon_id": "32701907",
+        "name": "signal-2g-4",
+        "font_class": "signal-2g-4",
+        "unicode": "e66f",
+        "unicode_decimal": 58991
+      },
+      {
+        "icon_id": "32701908",
+        "name": "signal-3",
+        "font_class": "signal-3",
+        "unicode": "e670",
+        "unicode_decimal": 58992
+      },
+      {
+        "icon_id": "32701909",
+        "name": "signal-3g-0",
+        "font_class": "signal-3g-0",
+        "unicode": "e671",
+        "unicode_decimal": 58993
+      },
+      {
+        "icon_id": "32701910",
+        "name": "signal-3g-1",
+        "font_class": "signal-3g-1",
+        "unicode": "e672",
+        "unicode_decimal": 58994
+      },
+      {
+        "icon_id": "32701911",
+        "name": "signal-3g-2",
+        "font_class": "signal-3g-2",
+        "unicode": "e673",
+        "unicode_decimal": 58995
+      },
+      {
+        "icon_id": "32701912",
+        "name": "signal-3g-3",
+        "font_class": "signal-3g-3",
+        "unicode": "e674",
+        "unicode_decimal": 58996
+      },
+      {
+        "icon_id": "32701913",
+        "name": "signal-4g-0",
+        "font_class": "signal-4g-0",
+        "unicode": "e675",
+        "unicode_decimal": 58997
+      },
+      {
+        "icon_id": "32701914",
+        "name": "signal-3g-4",
+        "font_class": "signal-3g-4",
+        "unicode": "e676",
+        "unicode_decimal": 58998
+      },
+      {
+        "icon_id": "32701915",
+        "name": "signal-4g-1",
+        "font_class": "signal-4g-1",
+        "unicode": "e677",
+        "unicode_decimal": 58999
+      },
+      {
+        "icon_id": "32701916",
+        "name": "signal-4",
+        "font_class": "signal-4",
+        "unicode": "e678",
+        "unicode_decimal": 59000
+      },
+      {
+        "icon_id": "32701917",
+        "name": "signal-4g-2",
+        "font_class": "signal-4g-2",
+        "unicode": "e679",
+        "unicode_decimal": 59001
+      },
+      {
+        "icon_id": "32701918",
+        "name": "signal-5g-0",
+        "font_class": "signal-5g-0",
+        "unicode": "e67a",
+        "unicode_decimal": 59002
+      },
+      {
+        "icon_id": "32701919",
+        "name": "signal-5g-2",
+        "font_class": "signal-5g-2",
+        "unicode": "e67b",
+        "unicode_decimal": 59003
+      },
+      {
+        "icon_id": "32701920",
+        "name": "signal-4g-4",
+        "font_class": "signal-4g-4",
+        "unicode": "e67c",
+        "unicode_decimal": 59004
+      },
+      {
+        "icon_id": "32701921",
+        "name": "signal-5g-1",
+        "font_class": "signal-5g-1",
+        "unicode": "e67d",
+        "unicode_decimal": 59005
+      },
+      {
+        "icon_id": "32701922",
+        "name": "signal-4g-3",
+        "font_class": "signal-4g-3",
+        "unicode": "e67e",
+        "unicode_decimal": 59006
+      },
+      {
+        "icon_id": "32701923",
+        "name": "signal-5g-3",
+        "font_class": "signal-5g-3",
+        "unicode": "e67f",
+        "unicode_decimal": 59007
+      },
+      {
+        "icon_id": "32701924",
+        "name": "signal-5g-4",
+        "font_class": "signal-5g-4",
+        "unicode": "e680",
+        "unicode_decimal": 59008
+      },
+      {
+        "icon_id": "32701925",
+        "name": "signal-e-1",
+        "font_class": "signal-e-1",
+        "unicode": "e681",
+        "unicode_decimal": 59009
+      },
+      {
+        "icon_id": "32701926",
+        "name": "signal-e-0",
+        "font_class": "signal-e-0",
+        "unicode": "e682",
+        "unicode_decimal": 59010
+      },
+      {
+        "icon_id": "32701927",
+        "name": "signal-e-3",
+        "font_class": "signal-e-3",
+        "unicode": "e683",
+        "unicode_decimal": 59011
+      },
+      {
+        "icon_id": "32701928",
+        "name": "signal-roaming",
+        "font_class": "signal-roaming",
+        "unicode": "e684",
+        "unicode_decimal": 59012
+      },
+      {
+        "icon_id": "32701929",
+        "name": "signal-e-4",
+        "font_class": "signal-e-4",
+        "unicode": "e685",
+        "unicode_decimal": 59013
+      },
+      {
+        "icon_id": "32701930",
+        "name": "signal-open-card",
+        "font_class": "signal-open-card",
+        "unicode": "e686",
+        "unicode_decimal": 59014
+      },
+      {
+        "icon_id": "32701932",
+        "name": "signal-e-2",
+        "font_class": "signal-e-2",
+        "unicode": "e688",
+        "unicode_decimal": 59016
+      }
+    ]
+  }
+
+  public icondata_wifi = {
+    "id": "3756669",
+    "name": "多色-wifi",
+    "font_family": "iconfont-wifi",
+    "css_prefix_text": "icon-",
+    "description": "",
+    "glyphs": [
+      {
+        "icon_id": "32723522",
+        "name": "wifi-1",
+        "font_class": "wifi-1",
+        "unicode": "e679",
+        "unicode_decimal": 59001
+      },
+      {
+        "icon_id": "32723523",
+        "name": "wifi-0",
+        "font_class": "wifi-0",
+        "unicode": "e67a",
+        "unicode_decimal": 59002
+      },
+      {
+        "icon_id": "32723524",
+        "name": "wifi-2",
+        "font_class": "wifi-2",
+        "unicode": "e67b",
+        "unicode_decimal": 59003
+      },
+      {
+        "icon_id": "32723525",
+        "name": "wifi-lock-1",
+        "font_class": "wifi-lock-1",
+        "unicode": "e67c",
+        "unicode_decimal": 59004
+      },
+      {
+        "icon_id": "32723526",
+        "name": "wifi-lock-2",
+        "font_class": "wifi-lock-2",
+        "unicode": "e67d",
+        "unicode_decimal": 59005
+      },
+      {
+        "icon_id": "32723527",
+        "name": "wifi-3",
+        "font_class": "wifi-3",
+        "unicode": "e67e",
+        "unicode_decimal": 59006
+      },
+      {
+        "icon_id": "32723528",
+        "name": "wifi-lock-3",
+        "font_class": "wifi-lock-3",
+        "unicode": "e67f",
+        "unicode_decimal": 59007
+      },
+      {
+        "icon_id": "32723529",
+        "name": "wifi-nonet-0",
+        "font_class": "wifi-nonet-0",
+        "unicode": "e680",
+        "unicode_decimal": 59008
+      },
+      {
+        "icon_id": "32723530",
+        "name": "wifi-lock-0",
+        "font_class": "wifi-lock-0",
+        "unicode": "e681",
+        "unicode_decimal": 59009
+      },
+      {
+        "icon_id": "32723531",
+        "name": "wifi-nonet-1",
+        "font_class": "wifi-nonet-1",
+        "unicode": "e682",
+        "unicode_decimal": 59010
+      },
+      {
+        "icon_id": "32723532",
+        "name": "wifi-lock-4",
+        "font_class": "wifi-lock-4",
+        "unicode": "e683",
+        "unicode_decimal": 59011
+      },
+      {
+        "icon_id": "32723533",
+        "name": "wifi-permissions",
+        "font_class": "wifi-permissions",
+        "unicode": "e684",
+        "unicode_decimal": 59012
+      },
+      {
+        "icon_id": "32723534",
+        "name": "wifi-nonet-2",
+        "font_class": "wifi-nonet-2",
+        "unicode": "e685",
+        "unicode_decimal": 59013
+      },
+      {
+        "icon_id": "32723535",
+        "name": "wifi-nonet-3",
+        "font_class": "wifi-nonet-3",
+        "unicode": "e686",
+        "unicode_decimal": 59014
+      },
+      {
+        "icon_id": "32723615",
+        "name": "wifi-4",
+        "font_class": "wifi-4",
+        "unicode": "e687",
+        "unicode_decimal": 59015
+      }
+    ]
+  }
+
+  initSignalIcon() {
+    let html = ''
+    html += '<h3>signal字体库iconfont-signal</h3>'
+    for (let i = 0; i < this.icondata_signal.glyphs.length; i++) {
+      html +=
+        '<span class="iconfont-signal">&#x' +
+        this.icondata_signal.glyphs[i].unicode +
+        ';</span>'
+      html +=
+        '<span  class="icon-name">' +
+        this.icondata_signal.glyphs[i].name +
+        '</span><hr/>'
+    }
+    let node = document.createElement('div')
+    node.className = 'p-signal'
+    node.innerHTML = html
+    this.shadowRoot!.querySelector('.abc')!.appendChild(node)
+  }
+
+  initWifiIcon() {
+    let html = ''
+    html += '<h3>WIFI字体库iconfont-wifi</h3>'
+    for (let i = 0; i < this.icondata_wifi.glyphs.length; i++) {
+      html +=
+        '<span class="iconfont-wifi">&#x' +
+        this.icondata_wifi.glyphs[i].unicode +
+        ';</span>'
+      html +=
+        '<span  class="icon-name">' +
+        this.icondata_wifi.glyphs[i].name +
+        '</span><hr/>'
+    }
+    let node = document.createElement('div')
+    node.className = 'p-wifi'
+    node.innerHTML = html
+    this.shadowRoot!.querySelector('.abc')!.appendChild(node)
+  }
+
+  firstUpdated() {
+    this.initSignalIcon()
+    this.initWifiIcon()
+  }
+
+  render() {
+    return html`
+      <div class="abc"></div>
+      <div>
+        <h3>使用ffont.svg的symbol方法展示</h3>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-QQ"
+            ></use>
+          </svg>
+          <h4>ffont-QQ</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-1"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-nonet-1</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-2"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-nonet-2</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-nonet-3"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-nonet-3</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-1"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-1</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-2"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-2</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-3"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-3</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-wifi-4"
+            ></use>
+          </svg>
+          <h4>ffont-wifi-4</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-0"
+            ></use>
+          </svg>
+          <h4>ffont-signal-0</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-1"
+            ></use>
+          </svg>
+          <h4>ffont-signal-1</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-2"
+            ></use>
+          </svg>
+          <h4>ffont-signal-2</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-3"
+            ></use>
+          </svg>
+          <h4>ffont-signal-3</h4>
+        </li>
+        <li class="symbol">
+          <svg class="icon" aria-hidden="true">
+            <use
+              xlink:href="/src/test/panels/iconfont/ffont.symbol.svg#ffont-signal-4"
+            ></use>
+          </svg>
+          <h4>ffont-signal-4</h4>
+        </li>
+      </div>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [iconFontStyles]
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-iconfont': PanelIconFont
+  }
+}
diff --git a/src/test/panels/iconfont/iconfont/iconfont-signal.css b/src/test/panels/iconfont/iconfont/iconfont-signal.css
new file mode 100644
index 0000000..c98fa96
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont-signal.css
@@ -0,0 +1,159 @@
+@font-face {
+  font-family: "iconfont-signal"; /* Project id 3582390 */
+  /* Color fonts */
+  src: 
+       url('iconfont-signal.ttf?t=1667956429504') format('truetype');
+}
+
+.iconfont-signal {
+  font-family: "iconfont-signal" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-flow-none:before {
+  content: "\e664";
+}
+
+.icon-flow-down:before {
+  content: "\e665";
+}
+
+.icon-flow-up:before {
+  content: "\e666";
+}
+
+.icon-flow-updown:before {
+  content: "\e667";
+}
+
+.icon-signal-0:before {
+  content: "\e668";
+}
+
+.icon-signal-1:before {
+  content: "\e669";
+}
+
+.icon-signal-2:before {
+  content: "\e66a";
+}
+
+.icon-signal-2g-0:before {
+  content: "\e66b";
+}
+
+.icon-signal-2g-1:before {
+  content: "\e66c";
+}
+
+.icon-signal-2g-3:before {
+  content: "\e66d";
+}
+
+.icon-signal-2g-2:before {
+  content: "\e66e";
+}
+
+.icon-signal-2g-4:before {
+  content: "\e66f";
+}
+
+.icon-signal-3:before {
+  content: "\e670";
+}
+
+.icon-signal-3g-0:before {
+  content: "\e671";
+}
+
+.icon-signal-3g-1:before {
+  content: "\e672";
+}
+
+.icon-signal-3g-2:before {
+  content: "\e673";
+}
+
+.icon-signal-3g-3:before {
+  content: "\e674";
+}
+
+.icon-signal-4g-0:before {
+  content: "\e675";
+}
+
+.icon-signal-3g-4:before {
+  content: "\e676";
+}
+
+.icon-signal-4g-1:before {
+  content: "\e677";
+}
+
+.icon-signal-4:before {
+  content: "\e678";
+}
+
+.icon-signal-4g-2:before {
+  content: "\e679";
+}
+
+.icon-signal-5g-0:before {
+  content: "\e67a";
+}
+
+.icon-signal-5g-2:before {
+  content: "\e67b";
+}
+
+.icon-signal-4g-4:before {
+  content: "\e67c";
+}
+
+.icon-signal-5g-1:before {
+  content: "\e67d";
+}
+
+.icon-signal-4g-3:before {
+  content: "\e67e";
+}
+
+.icon-signal-5g-3:before {
+  content: "\e67f";
+}
+
+.icon-signal-5g-4:before {
+  content: "\e680";
+}
+
+.icon-signal-e-1:before {
+  content: "\e681";
+}
+
+.icon-signal-e-0:before {
+  content: "\e682";
+}
+
+.icon-signal-e-3:before {
+  content: "\e683";
+}
+
+.icon-signal-roaming:before {
+  content: "\e684";
+}
+
+.icon-signal-e-4:before {
+  content: "\e685";
+}
+
+.icon-signal-open-card:before {
+  content: "\e686";
+}
+
+.icon-signal-e-2:before {
+  content: "\e688";
+}
+
diff --git a/src/test/panels/iconfont/iconfont/iconfont-signal.json b/src/test/panels/iconfont/iconfont/iconfont-signal.json
new file mode 100644
index 0000000..db67ac2
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont-signal.json
@@ -0,0 +1,261 @@
+{
+  "id": "3582390",
+  "name": "多色-signal",
+  "font_family": "iconfont-signal",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "32701896",
+      "name": "flow-none",
+      "font_class": "flow-none",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "32701897",
+      "name": "flow-down",
+      "font_class": "flow-down",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "32701898",
+      "name": "flow-up",
+      "font_class": "flow-up",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    },
+    {
+      "icon_id": "32701899",
+      "name": "flow-updown",
+      "font_class": "flow-updown",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "32701900",
+      "name": "signal-0",
+      "font_class": "signal-0",
+      "unicode": "e668",
+      "unicode_decimal": 58984
+    },
+    {
+      "icon_id": "32701901",
+      "name": "signal-1",
+      "font_class": "signal-1",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "32701902",
+      "name": "signal-2",
+      "font_class": "signal-2",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "32701903",
+      "name": "signal-2g-0",
+      "font_class": "signal-2g-0",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "32701904",
+      "name": "signal-2g-1",
+      "font_class": "signal-2g-1",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "32701905",
+      "name": "signal-2g-3",
+      "font_class": "signal-2g-3",
+      "unicode": "e66d",
+      "unicode_decimal": 58989
+    },
+    {
+      "icon_id": "32701906",
+      "name": "signal-2g-2",
+      "font_class": "signal-2g-2",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "32701907",
+      "name": "signal-2g-4",
+      "font_class": "signal-2g-4",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "32701908",
+      "name": "signal-3",
+      "font_class": "signal-3",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "32701909",
+      "name": "signal-3g-0",
+      "font_class": "signal-3g-0",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "32701910",
+      "name": "signal-3g-1",
+      "font_class": "signal-3g-1",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "32701911",
+      "name": "signal-3g-2",
+      "font_class": "signal-3g-2",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "32701912",
+      "name": "signal-3g-3",
+      "font_class": "signal-3g-3",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "32701913",
+      "name": "signal-4g-0",
+      "font_class": "signal-4g-0",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "32701914",
+      "name": "signal-3g-4",
+      "font_class": "signal-3g-4",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "32701915",
+      "name": "signal-4g-1",
+      "font_class": "signal-4g-1",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "32701916",
+      "name": "signal-4",
+      "font_class": "signal-4",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "32701917",
+      "name": "signal-4g-2",
+      "font_class": "signal-4g-2",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "32701918",
+      "name": "signal-5g-0",
+      "font_class": "signal-5g-0",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "32701919",
+      "name": "signal-5g-2",
+      "font_class": "signal-5g-2",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "32701920",
+      "name": "signal-4g-4",
+      "font_class": "signal-4g-4",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "32701921",
+      "name": "signal-5g-1",
+      "font_class": "signal-5g-1",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "32701922",
+      "name": "signal-4g-3",
+      "font_class": "signal-4g-3",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "32701923",
+      "name": "signal-5g-3",
+      "font_class": "signal-5g-3",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "32701924",
+      "name": "signal-5g-4",
+      "font_class": "signal-5g-4",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "32701925",
+      "name": "signal-e-1",
+      "font_class": "signal-e-1",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "32701926",
+      "name": "signal-e-0",
+      "font_class": "signal-e-0",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "32701927",
+      "name": "signal-e-3",
+      "font_class": "signal-e-3",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "32701928",
+      "name": "signal-roaming",
+      "font_class": "signal-roaming",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "32701929",
+      "name": "signal-e-4",
+      "font_class": "signal-e-4",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "32701930",
+      "name": "signal-open-card",
+      "font_class": "signal-open-card",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "32701932",
+      "name": "signal-e-2",
+      "font_class": "signal-e-2",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    }
+  ]
+}
diff --git a/src/test/panels/iconfont/iconfont/iconfont-signal.ttf b/src/test/panels/iconfont/iconfont/iconfont-signal.ttf
new file mode 100644
index 0000000..f558a47
Binary files /dev/null and b/src/test/panels/iconfont/iconfont/iconfont-signal.ttf differ
diff --git a/src/test/panels/iconfont/iconfont/iconfont-wifi.css b/src/test/panels/iconfont/iconfont/iconfont-wifi.css
new file mode 100644
index 0000000..b80e0f5
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont-wifi.css
@@ -0,0 +1,75 @@
+@font-face {
+  font-family: "iconfont-wifi"; /* Project id 3756669 */
+  /* Color fonts */
+  src: 
+       url('iconfont-wifi.ttf?t=1667957389350') format('truetype');
+}
+
+.iconfont-wifi {
+  font-family: "iconfont-wifi" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-wifi-1:before {
+  content: "\e679";
+}
+
+.icon-wifi-0:before {
+  content: "\e67a";
+}
+
+.icon-wifi-2:before {
+  content: "\e67b";
+}
+
+.icon-wifi-lock-1:before {
+  content: "\e67c";
+}
+
+.icon-wifi-lock-2:before {
+  content: "\e67d";
+}
+
+.icon-wifi-3:before {
+  content: "\e67e";
+}
+
+.icon-wifi-lock-3:before {
+  content: "\e67f";
+}
+
+.icon-wifi-nonet-0:before {
+  content: "\e680";
+}
+
+.icon-wifi-lock-0:before {
+  content: "\e681";
+}
+
+.icon-wifi-nonet-1:before {
+  content: "\e682";
+}
+
+.icon-wifi-lock-4:before {
+  content: "\e683";
+}
+
+.icon-wifi-permissions:before {
+  content: "\e684";
+}
+
+.icon-wifi-nonet-2:before {
+  content: "\e685";
+}
+
+.icon-wifi-nonet-3:before {
+  content: "\e686";
+}
+
+.icon-wifi-4:before {
+  content: "\e687";
+}
+
diff --git a/src/test/panels/iconfont/iconfont/iconfont-wifi.json b/src/test/panels/iconfont/iconfont/iconfont-wifi.json
new file mode 100644
index 0000000..9b15959
--- /dev/null
+++ b/src/test/panels/iconfont/iconfont/iconfont-wifi.json
@@ -0,0 +1,114 @@
+{
+  "id": "3756669",
+  "name": "多色-wifi",
+  "font_family": "iconfont-wifi",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "32723522",
+      "name": "wifi-1",
+      "font_class": "wifi-1",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "32723523",
+      "name": "wifi-0",
+      "font_class": "wifi-0",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "32723524",
+      "name": "wifi-2",
+      "font_class": "wifi-2",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "32723525",
+      "name": "wifi-lock-1",
+      "font_class": "wifi-lock-1",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "32723526",
+      "name": "wifi-lock-2",
+      "font_class": "wifi-lock-2",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "32723527",
+      "name": "wifi-3",
+      "font_class": "wifi-3",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "32723528",
+      "name": "wifi-lock-3",
+      "font_class": "wifi-lock-3",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "32723529",
+      "name": "wifi-nonet-0",
+      "font_class": "wifi-nonet-0",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "32723530",
+      "name": "wifi-lock-0",
+      "font_class": "wifi-lock-0",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "32723531",
+      "name": "wifi-nonet-1",
+      "font_class": "wifi-nonet-1",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "32723532",
+      "name": "wifi-lock-4",
+      "font_class": "wifi-lock-4",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "32723533",
+      "name": "wifi-permissions",
+      "font_class": "wifi-permissions",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "32723534",
+      "name": "wifi-nonet-2",
+      "font_class": "wifi-nonet-2",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "32723535",
+      "name": "wifi-nonet-3",
+      "font_class": "wifi-nonet-3",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "32723615",
+      "name": "wifi-4",
+      "font_class": "wifi-4",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    }
+  ]
+}
diff --git a/src/test/panels/iconfont/iconfont/iconfont-wifi.ttf b/src/test/panels/iconfont/iconfont/iconfont-wifi.ttf
new file mode 100644
index 0000000..17111f5
Binary files /dev/null and b/src/test/panels/iconfont/iconfont/iconfont-wifi.ttf differ
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 9742a6b..4646cf4 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -38,6 +38,7 @@ import './slider/slider'
 import './switch/switch'
 import './toast/toast'
 import './weather/weather'
+import './iconfont/iconfont'
 import './swiper/swiper'
 
 import './animation/animation'
@@ -303,7 +304,7 @@ export class PanelRoot extends LitElement {
         iconcolor="blue"
         href="#battery"
       ></star-li>
-      <hr />
+      
       <star-li
         type=${LiType.ICON_LABEL}
         label="电池"
@@ -319,6 +320,15 @@ export class PanelRoot extends LitElement {
         iconcolor="purple"
         href="#animation"
       ></star-li>
+      <hr />
+      
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="IconFont图标"
+        icon="all-day"
+        iconcolor="yellow"
+        href="#iconfont"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.ONLY_HEADER} title="时钟">
diff --git a/src/test/panels/shared-picker-styles.ts b/src/test/panels/shared-picker-styles.ts
index 941dd10..496bbe7 100644
--- a/src/test/panels/shared-picker-styles.ts
+++ b/src/test/panels/shared-picker-styles.ts
@@ -1,4 +1,5 @@
 import {css, CSSResult} from 'lit'
+import './iconfont/iconfont/iconfont.css'
 
 export const sharedPickerStyles: CSSResult = css`
   * {
diff --git a/src/test/panels/toast/toast.ts b/src/test/panels/toast/toast.ts
index e0d63b1..0ee830c 100644
--- a/src/test/panels/toast/toast.ts
+++ b/src/test/panels/toast/toast.ts
@@ -1,13 +1,37 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement} from 'lit/decorators.js'
 import {sharedStyles} from '../../../components/toast/toast-styles'
+import '../../../components/button'
+import {StarToast} from '../../../components/toast'
 
 @customElement('panel-toast')
 export class PanelToast extends LitElement {
+  toast: StarToast = new StarToast({information: 'test'})
+  constructor() {
+    super()
+  }
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
+
+  show() {
+    if (this.toast.open) {
+      this.toast.hide()
+    } else {
+      this.toast.show()
+    }
+  }
   render() {
+    return html`
+      <star-button
+        type="normal"
+        class="$1"
+        @click=${this.show}
+        label="弹出通知"
+      ></star-button>
+    `
+  }
+  render_bak() {
     return html`
       <div>
         <h3>普通的</h3>