refactor!: change library how initialization happens

.storybook/app.ts

@@ -1,9 +1,13 @@
-import { RuiPlugin } from '../src';
+import { createRui } from '../src';
 import * as Icons from '../src/all-icons';
 import Vue from 'vue';
 
-Vue.use(RuiPlugin, {
-  icons: Object.values(Icons),
-});
+const RuiPlugin = createRui({
+  theme: {
+    icons: Object.values(Icons),
+  }
+})
+
+Vue.use(RuiPlugin);
 
 export const vueInstance = new Vue({ template: '<div />' }).$mount();

README.md

@@ -27,10 +27,11 @@ import '@fontsource/roboto/latin.css';
 To use the library you must install the library plugin:
 
 ```typescript
-import { RuiPlugin } from "@rotki/ui-library-compat";
+import { createRui } from "@rotki/ui-library-compat";
 
 ...
-Vue.use(RuiPlugin, options);
+const RuiPlugin = createRui(options)
+Vue.use(RuiPlugin);
 ```
 
 ### Using the components
@@ -71,11 +72,15 @@ switchThemeScheme(ThemeMode.dark);
 
 You need to specify which icons you want to enable, when installing the RuiPlugin.
 ```typescript
-import { Ri4kFill, Ri4kLine, RuiPlugin } from '@rotki/ui-library-compat';
-
-Vue.use(RuiPlugin, {
-  icons: [Ri4kFill, Ri4kLine]
-});
+import { Ri4kFill, Ri4kLine, RuiPlugin, createRui } from '@rotki/ui-library-compat';
+a
+const RuiPlugin = createRui({
+  theme: {
+    icons: [Ri4kFill, Ri4kLine]
+  }
+})
+
+Vue.use(RuiPlugin);
 ```
 
 ```vue

example/src/main.ts

@@ -24,41 +24,44 @@ import {
   RiMoonLine,
   RiStarFill,
   RiSunLine,
-  RuiPlugin,
+  createRui,
 } from '@rotki/ui-library-compat';
 import Vue from 'vue';
 import App from '@/App.vue';
 import router from '@/router';
 
 Vue.use(PiniaVuePlugin);
-Vue.use(RuiPlugin, {
-  icons: [
-    RiMoonLine,
-    RiStarFill,
-    RiSunLine,
-    RiMacbookLine,
-    RiArrowLeftLine,
-    RiArrowRightLine,
-    RiAddFill,
-    RiAlertLine,
-    RiAlignCenter,
-    RiAlignLeft,
-    RiAlignRight,
-    RiAlignJustify,
-    RiCheckboxCircleLine,
-    RiCloseFill,
-    RiInformationLine,
-    RiErrorWarningLine,
-    RiArrowLeftSLine,
-    RiArrowRightSLine,
-    RiArrowUpSLine,
-    RiArrowDownSLine,
-  ],
-});
-
 const pinia = createPinia();
 setActivePinia(pinia);
 
+const RuiPlugin = createRui({
+  theme: {
+    icons: [
+      RiMoonLine,
+      RiStarFill,
+      RiSunLine,
+      RiMacbookLine,
+      RiArrowLeftLine,
+      RiArrowRightLine,
+      RiAddFill,
+      RiAlertLine,
+      RiAlignCenter,
+      RiAlignLeft,
+      RiAlignRight,
+      RiAlignJustify,
+      RiCheckboxCircleLine,
+      RiCloseFill,
+      RiInformationLine,
+      RiErrorWarningLine,
+      RiArrowLeftSLine,
+      RiArrowRightSLine,
+      RiArrowUpSLine,
+      RiArrowDownSLine,
+    ],
+  },
+});
+Vue.use(RuiPlugin);
+
 new Vue({
   // @ts-ignore
   pinia,

src/index.ts

@@ -23,6 +23,10 @@ export * from '@/components';
 
 export { StepperState };
 
+export interface RuiOptions {
+  theme?: InitThemeOptions;
+}
+
 const installTeleport = () => {
   if (!isClient) {
     return;
@@ -36,11 +40,17 @@ const installTeleport = () => {
   });
 };
 
-export const RuiPlugin = {
-  install: (app: VueConstructor, options?: InitThemeOptions) => {
+export function createRui(options: RuiOptions = {}) {
+  const { theme } = options;
+
+  const install = (_app: VueConstructor) => {
     const { registerIcons } = useIcons();
-    registerIcons(options?.icons || []);
-    useRotkiTheme().init({ ...options });
+    registerIcons(theme?.icons || []);
+    useRotkiTheme().init({ ...theme });
     installTeleport();
-  },
-};
+  };
+
+  return {
+    install,
+  };
+}