build: smaller bundle size for websites

packages/ui/package.json

@@ -45,12 +45,12 @@
 	"dependencies": {
 		"ariakit": "^2.0.0-next.41",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-icons": "^4.6.0"
+		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
 		"@favware/cliff-jumper": "^1.9.0",
 		"@ladle/react": "^2.4.5",
+		"@react-icons/all-files": "^4.1.0",
 		"@types/node": "16.18.3",
 		"@types/react": "^18.0.25",
 		"@types/react-dom": "^18.0.9",

packages/ui/src/lib/components/Alert.tsx

@@ -1,5 +1,7 @@
+import { VscFlame } from '@react-icons/all-files/vsc/VscFlame';
+import { VscInfo } from '@react-icons/all-files/vsc/VscInfo';
+import { VscWarning } from '@react-icons/all-files/vsc/VscWarning';
 import type { PropsWithChildren } from 'react';
-import { VscFlame, VscInfo, VscWarning } from 'react-icons/vsc';
 
 export interface IAlert {
 	title?: string | undefined;

packages/ui/src/lib/components/Section.tsx

@@ -1,6 +1,6 @@
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/disclosure';
 import type { PropsWithChildren } from 'react';
-import { VscChevronDown } from 'react-icons/vsc';
 
 export interface SectionOptions {
 	background?: boolean | undefined;

packages/ui/vite.config.ts

@@ -14,7 +14,15 @@ export default defineConfig({
 			fileName: 'ui',
 		},
 		rollupOptions: {
-			external: ['react', 'react-dom', 'ariakit/disclosure', 'react-icons/vsc'],
+			external: [
+				'react',
+				'react-dom',
+				'ariakit/disclosure',
+				'@react-icons/all-files/vsc/VscFlame',
+				'@react-icons/all-files/vsc/VscInfo',
+				'@react-icons/all-files/vsc/VscWarning',
+				'@react-icons/all-files/vsc/VscChevronDown',
+			],
 		},
 	},
 });