adding unplugin-icons as icon manager

web-admin/package.json

@@ -37,7 +37,8 @@
     "svelte-popperjs": "^1.3.2",
     "svelte-preprocess": "^4.10.6",
     "tailwindcss": "^3.2.7",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "unplugin-icons": "^0.18.1"
   },
   "type": "module"
 }

web-admin/src/app.d.ts

@@ -1,6 +1,8 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 // and what to do when importing types
+import "unplugin-icons/types/svelte";
+
 declare namespace App {
   interface Locals {
     userid: string;

web-admin/vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import dns from "dns";
 import type { UserConfig } from "vite";
+import Icons from "unplugin-icons/vite";
 
 // print dev server as `localhost` not `127.0.0.1`
 dns.setDefaultResultOrder("verbatim");
@@ -16,7 +17,13 @@ const config: UserConfig = {
     port: 3000,
     strictPort: true,
   },
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit(),
+    Icons({
+      compiler: "svelte",
+      autoInstall: true,
+    }),
+  ],
 };
 
 export default config;

web-auth/package.json

@@ -40,6 +40,7 @@
 		"svelte-check": "^3.0.1",
 		"tailwindcss": "^3.2.7",
 		"typescript": "^4.9.3",
+		"unplugin-icons": "^0.18.1",
 		"vite": "^4.0.0"
 	},
 	"type": "module"

web-auth/src/app.d.ts

@@ -1,5 +1,7 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+import "unplugin-icons/types/svelte";
+
 declare global {
   namespace App {
     // interface Error {}

web-auth/vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import dns from "dns";
 import type { UserConfig } from "vite";
+import Icons from "unplugin-icons/vite";
 
 // print dev server as `localhost` not `127.0.0.1`
 dns.setDefaultResultOrder("verbatim");
@@ -18,7 +19,13 @@ const config: UserConfig = {
     port: 3000,
     strictPort: true,
   },
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit(),
+    Icons({
+      compiler: "svelte",
+      autoInstall: true,
+    }),
+  ],
 };
 
 export default config;

web-common/app.d.ts

@@ -1,3 +1,5 @@
+import "unplugin-icons/types/svelte";
+
 declare namespace svelteHTML {
   interface HTMLAttributes {
     // Used for copy action `shift-click-actions.ts`

web-common/package.json

@@ -61,6 +61,7 @@
     "tailwindcss": "^3.2.7",
     "typescript": "^4.7.4",
     "ua-parser-js": "^1.0.2",
+    "unplugin-icons": "^0.18.1",
     "uuid": "^9.0.0",
     "vitest": "^0.31.0",
     "yaml": "^2.1.3",

web-common/src/layout/navigation/Footer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Discord from "@rilldata/web-common/components/icons/Discord.svelte";
-  import Docs from "@rilldata/web-common/components/icons/Docs.svelte";
-  import Github from "@rilldata/web-common/components/icons/Github.svelte";
-  import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
+  import Docs from "~icons/radix-icons/file-text";
+  import GitHub from "~icons/bxl/github";
+  import Discord from "~icons/bxl/discord-alt";
+  import InfoCircle from "~icons/ant-design/info-circle-outlined";
   import Shortcut from "@rilldata/web-common/components/tooltip/Shortcut.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
@@ -21,21 +21,21 @@
       icon: Docs,
       label: "Documentation",
       href: "https://docs.rilldata.com",
-      className: "fill-gray-600",
+      className: "text-gray-600 text-[12px]",
       shrinkIcon: false,
     },
     {
       icon: Discord,
       label: "Ask a question",
       href: "http://bit.ly/3jg4IsF",
-      className: "fill-gray-500",
+      className: "text-gray-500 text-[14px]",
       shrinkIcon: true,
     },
     {
-      icon: Github,
+      icon: GitHub,
       label: "Report an issue",
       href: "https://github.com/rilldata/rill/issues/new?assignees=&labels=bug&template=bug_report.md&title=",
-      className: "fill-gray-500",
+      className: "text-gray-500 text-[14px]",
       shrinkIcon: true,
     },
   ];
@@ -57,7 +57,7 @@
         >
           <svelte:component
             this={lineItem.icon}
-            className={lineItem.className}
+            class={lineItem.className}
             size="14px"
           />
         </div>
@@ -77,7 +77,7 @@
           rel="noreferrer"
           class="text-gray-400"
         >
-          <InfoCircle size="16px" />
+          <InfoCircle class="text-[14px] text-gray-500" />
         </a>
         <div slot="tooltip-content" transition:fly={{ duration: 100, y: 8 }}>
           <TooltipContent>

web-common/vite.config.ts

@@ -1,5 +1,6 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { defineConfig, UserConfig } from "vitest/config";
+import Icons from "unplugin-icons/vite";
 
 type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 type Alias = Writeable<UserConfig["resolve"]["alias"]>;
@@ -43,7 +44,13 @@ export default defineConfig(({ mode }) => {
     resolve: {
       alias,
     },
-    plugins: [svelte()],
+    plugins: [
+      svelte(),
+      Icons({
+        compiler: "svelte",
+        autoInstall: true,
+      }),
+    ],
     test: {
       coverage: {
         provider: "c8",

web-local/package.json

@@ -35,6 +35,7 @@
     "svelte-check": "^3.0.3",
     "svelte-preprocess": "^4.10.7",
     "tree-kill": "^1.2.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.3",
+    "unplugin-icons": "^0.18.1"
   }
 }

web-local/src/app.d.ts

@@ -0,0 +1,14 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+import "unplugin-icons/types/svelte";
+
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};

web-local/vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import dns from "dns";
 import { defineConfig } from "vite";
+import Icons from "unplugin-icons/vite";
 
 // print dev server as `localhost` not `127.0.0.1`
 dns.setDefaultResultOrder("verbatim");
@@ -40,7 +41,13 @@ const config = defineConfig(({ mode }) => ({
   define: {
     RILL_RUNTIME_URL: `"${runtimeUrl}"`,
   },
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit(),
+    Icons({
+      compiler: "svelte",
+      autoInstall: true,
+    }),
+  ],
 }));
 
 export default config;