✨ feat: Add demos

.dumirc.ts

@@ -14,7 +14,7 @@ const themeConfig = {
     },
     {
       link: '/components/anthropic',
-      text: 'Get Started',
+      text: 'View all icons',
       type: 'primary',
     },
   ],
@@ -25,7 +25,6 @@ const themeConfig = {
     sourceUrl: `{github}/tree/master/src/{atomId}/index.tsx`,
   },
   description: 'Lobe UI is an open-source UI component library for building AIGC web apps',
-  docStyle: 'pure',
   footer: 'Made with 🤯 by LobeHub',
   name: 'Icons',
   nav: [

README.md

@@ -8,7 +8,7 @@
 
 <h1>Lobe Icons</h1>
 
-Popular AI / LLM model brand svg logo and icon collection
+Popular AI / LLM Model Brand SVG Logo and Icon Collection
 
 [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
 
@@ -47,6 +47,12 @@ Popular AI / LLM model brand svg logo and icon collection
 
 </details>
 
+## ✨ Features
+
+- 🚀 **Lightweight & Scalable**: Icons are designed to be lightweight, utilizing highly optimized scalable vector graphics (SVG) for the best performance and quality.
+- 🌳 **Tree Shakable**: The collection is tree-shakable, ensuring that you only import the icons that you use, which helps in reducing the overall bundle size of your project.
+- 👥 **Active Community**: Lobe Icons boasts an active community of designers and developers. Engage with us on platforms like GitHub and Discord to contribute or get support.
+
 ## 📦 Installation
 
 > \[!IMPORTANT]\

docs/index.md

@@ -1,5 +1,7 @@
 ---
 hero:
   title: LobeHub <b>Icons</b>
-  description: Popular LLM model brand svg logo and icon collection
+  description: Popular AI / LLM Model Brand SVG Logo and Icon Collection
 ---
+
+<code src="./index.tsx" inline></code>

docs/index.tsx

@@ -0,0 +1,61 @@
+import * as Icons from '@lobehub/icons';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+
+const data = Object.values(Icons).filter((icon: any) => icon?.colorPrimary);
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    overflow: hidden;
+
+    max-width: 960px;
+    margin-top: -4%;
+
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  item: css`
+    width: 96px;
+    height: 96px;
+    background: ${token.colorBgContainer};
+  `,
+}));
+
+export default () => {
+  const { styles } = useStyles();
+  const store = useCreateStore();
+
+  const { size, color, monochrome } = useControls(
+    {
+      color: {
+        color: true,
+        value: '#fff',
+      },
+      monochrome: true,
+      size: {
+        max: 96,
+        min: 16,
+        step: 1,
+        value: 48,
+      },
+    },
+    { store },
+  );
+
+  return (
+    <StoryBook className={styles.container} levaStore={store}>
+      <Flexbox align={'center'} gap={4} horizontal justify={'center'} style={{ flexWrap: 'wrap' }}>
+        {data.map((Icon: any, index) => {
+          const IconRender = !monochrome && Icon.Color ? Icon.Color : Icon;
+
+          return (
+            <Flexbox align={'center'} className={styles.item} justify={'center'} key={index}>
+              <IconRender color={color === '#fff' ? undefined : color} size={size} />
+            </Flexbox>
+          );
+        })}
+      </Flexbox>
+    </StoryBook>
+  );
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobehub/icons",
   "version": "1.8.1",
-  "description": "Popular LLM model brand svg logo and icon collection",
+  "description": "Popular AI / LLM Model Brand SVG Logo and Icon Collection",
   "keywords": [
     "lobehub",
     "llm icons",

src/Bedrock/index.md

@@ -60,9 +60,6 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { Bedrock } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';
 

src/Fireworks/index.md

@@ -54,9 +54,6 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { Fireworks } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';
 

src/Midjourney/index.md

@@ -53,9 +53,6 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { Midjourney } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';
 

src/Ollama/index.md

@@ -53,9 +53,6 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { Ollama } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';
 

src/OpenAI/index.md

@@ -56,9 +56,6 @@ export default () => (
 ## Colors
 
 ```tsx
-/**
- * inline: true
- */
 import { OpenAI } from '@lobehub/icons';
 import { Flexbox } from 'react-layout-kit';