KNOB: knob.js removed, to use Nicegui native icon

FIXME: make it possible to show numerical values, in addition to icons
FIXME: can change icon color
FIXME: ensure dev access to the Icon Element via a property

nicegui/elements/knob.js

@@ -1,10 +0,0 @@
-export default {
-  template: `<q-knob>
-      <q-icon :name="this.inner_icon" :size="this.size_icon" :color="this.color_icon" />
-    </q-knob>`,
-  props: {
-    color_icon: String,
-    inner_icon: String,
-    size_icon: String,
-  },
-};

nicegui/elements/knob.py

@@ -1,7 +1,8 @@
 from ..dependencies import register_component
 from ..element import Element
+from ..ui import icon
 
-register_component("knob", __file__, "knob.js")
+# register_component("knob", __file__, "knob.js")
 
 
 class Knob(Element):
@@ -11,7 +12,7 @@ class Knob(Element):
         center_color: str = "white",
         track_color: str = "secondary",
         size: str = "",
-        icon: str | None = None,
+        icon_name: str | None = None,
         icon_color: str = "black",
         icon_size: str = "1rem",
     ):
@@ -28,15 +29,15 @@ class Knob(Element):
         :param icon_color: color name for the icon in the center of the component, examples: primary, teal-10.
         :param icon_size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl), examples: 16px, 2rem.
         """
-        super().__init__("knob")
+        super().__init__("q-knob")
 
         self._props["color"] = color
         self._props["center-color"] = center_color
         self._props["track-color"] = track_color
         self._props["size"] = size
 
-        if icon is not None:
-            self._props["show-value"] = True
-            self._props["inner_icon"] = icon
-            self._props["color_icon"] = icon_color
-            self._props["size_icon"] = icon_size
+        if icon_name is not None:
+            self._props["show-value"] = True  # FIXME: make it possible to show numerical values, in addition to icons
+
+            with self:
+                icon(icon_name)

website/reference.py

@@ -149,7 +149,8 @@ def create_full(menu: ui.element) -> None:
     @example(ui.knob, menu)
     def knob_example():
         ui.knob()
-        ui.knob(icon="volume_up")
+
+        ui.knob(icon_name="volume_up")
 
     @example(ui.color_input, menu)
     def color_input_example():