feat: allow custom icons on custom modules (#351)

* feat: allow custom icons on custom modules

* Update options.ts

* Update customModules/config.ts

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

customModules/config.ts

@@ -37,6 +37,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     title: 'Button Border',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.customModules.ram.icon,
+                    title: 'Ram Icon',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.bar.customModules.ram.label,
                     title: 'Show Label',
@@ -93,6 +98,11 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                     title: 'Button Border',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.customModules.cpu.icon,
+                    title: 'Cpu Icon',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.bar.customModules.cpu.label,
                     title: 'Show Label',
@@ -156,8 +166,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.storage.icon,
                     title: 'Storage Icon',
-                    type: 'enum',
-                    enums: ['󰋊', '', '󱛟', '', '', ''],
+                    type: 'string',
                 }),
                 Option({
                     opt: options.bar.customModules.storage.label,
@@ -225,8 +234,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.netstat.icon,
                     title: 'Netstat Icon',
-                    type: 'enum',
-                    enums: ['󰖟', '󰇚', '󰕒', '󰛳', '', '󰣺', '󰖩', '', '󰈀'],
+                    type: 'string',
                 }),
                 Option({
                     opt: options.bar.customModules.netstat.label,
@@ -292,9 +300,8 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 }),
                 Option({
                     opt: options.bar.customModules.kbLayout.icon,
-                    title: 'kbLayout Icon',
-                    type: 'enum',
-                    enums: ['', '󰌌', '', '󰬴', '󰗊'],
+                    title: 'Keyboard Layout Icon',
+                    type: 'string',
                 }),
                 Option({
                     opt: options.bar.customModules.kbLayout.label,
@@ -357,8 +364,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.updates.icon,
                     title: 'Updates Icon',
-                    type: 'enum',
-                    enums: ['󰚰', '󰇚', '', '󱑢', '󱑣', '󰏖', '', '󰏔', '󰏗'],
+                    type: 'string',
                 }),
                 Option({
                     opt: options.bar.customModules.updates.label,
@@ -557,8 +563,7 @@ export const CustomModuleSettings = (): Scrollable<GtkWidget, Attribute> =>
                 Option({
                     opt: options.bar.customModules.power.icon,
                     title: 'Power Button Icon',
-                    type: 'enum',
-                    enums: ['', '', '󰍃', '󰿅', '󰒲', '󰤄'],
+                    type: 'string',
                 }),
                 Option({
                     opt: options.bar.customModules.power.leftClick,

customModules/cpu/index.ts

@@ -13,7 +13,7 @@ import { BarBoxChild } from 'lib/types/bar';
 import { Attribute, Child } from 'lib/types/widget';
 
 // All the user configurable options for the cpu module that are needed
-const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval } =
+const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval, icon } =
     options.bar.customModules.cpu;
 
 export const cpuUsage = Variable(0);
@@ -35,7 +35,7 @@ export const Cpu = (): BarBoxChild => {
     };
 
     const cpuModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
         label: Utils.merge([cpuUsage.bind('value'), round.bind('value')], (cpuUsg, rnd) => {
             return renderLabel(cpuUsg, rnd);
         }),

customModules/ram/index.ts

@@ -20,7 +20,8 @@ import { pollVariable } from 'customModules/PollVar';
 import { Attribute, Child } from 'lib/types/widget';
 
 // All the user configurable options for the ram module that are needed
-const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval } = options.bar.customModules.ram;
+const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval, icon } =
+    options.bar.customModules.ram;
 
 const defaultRamData: GenericResourceData = { total: 0, used: 0, percentage: 0, free: 0 };
 const ramUsage = Variable<GenericResourceData>(defaultRamData);
@@ -29,7 +30,7 @@ pollVariable(ramUsage, [round.bind('value')], pollingInterval.bind('value'), cal
 
 export const Ram = (): BarBoxChild => {
     const ramModule = module({
-        textIcon: '',
+        textIcon: icon.bind('value'),
         label: Utils.merge(
             [ramUsage.bind('value'), labelType.bind('value'), round.bind('value')],
             (rmUsg: GenericResourceData, lblTyp: ResourceLabelType, round: boolean) => {