Minor changes

docs/.vitepress/components/IconsCategoryOverview.vue

@@ -16,40 +16,42 @@ function setActiveIconName(name: string) {
   activeIconName.value = name
 }
 
-const activeIcon = computed(() =>
-  props.icons?.find((icon) => icon.name === activeIconName.value)
-)
+
 
 const categories = computed(() => {
   if( !props.categories?.length || !props.icons?.length ) return []
   return props.categories.map(({ name, title }) => {
-  const categoryIcons = props.icons.filter((icon) => props.icons.categories.includes(name))
+    const categoryIcons = props.icons.filter(({ categories }) => categories.includes(name))
 
-  // const isSearching = icons.length !== data.length;
-  // const searchResults = isSearching
-  //   ? categoryIcons.filter(icon => icons.some((item) => item?.name === icon?.name))
-  //   : categoryIcons;
+    // const isSearching = icons.length !== data.length;
+    // const searchResults = isSearching
+    //   ? categoryIcons.filter(icon => icons.some((item) => item?.name === icon?.name))
+    //   : categoryIcons;
 
-  return {
-    title,
-    name,
-    icons: categoryIcons,
-    // isActive: name === activeCategory,
-  };
-})
+    return {
+      title,
+      name,
+      icons: categoryIcons,
+      // isActive: name === activeCategory,
+    };
+  })
 })
 
+const activeIcon = computed(() =>
+  props.categories?.find((icon) => icon.name === activeIconName.value)
+)
+
 </script>
 
 <template>
   <section class="category" v-for="category in categories" :key="category.name">
-      <h2 >{{ category.title }}</h2>
-      <IconGrid :activeIcon="activeIcon" :icons="icons" @setActiveIcon="setActiveIconName"/>
+      <h2 class="title">{{ category.title }}</h2>
+      <IconGrid :activeIcon="activeIcon" :icons="category.icons" @setActiveIcon="setActiveIconName"/>
     </section>
   <IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
 </template>
 
-<style>
+<style scoped>
 .icons {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
@@ -61,4 +63,13 @@ const categories = computed(() => {
 .icon {
   aspect-ratio: 1/1;
 }
+
+.title {
+  margin-bottom: 24px;
+  font-size: 19px;
+}
+
+.category {
+  margin-bottom: 32px;
+}
 </style>

docs/.vitepress/config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
         {
           text: 'Introduction',
           items: [
-            { text: 'What is lucide?', link: '/guide/introduction' },
+            { text: 'What is lucide?', link: '/guide/' },
             { text: 'Installation', link: '/guide/installation' }
           ]
         },

docs/guide/index.md

@@ -1 +1,22 @@
-# Docs
+---
+title: Introduction
+nextPage:
+  - comparison
+  - installation
+---
+
+# Introduction
+Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
+
+Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons. 
+
+With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.
+
+When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.
+
+Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.
+
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
+
+Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
+

docs/guide/introduction.md

@@ -1,22 +0,0 @@
----
-title: Introduction
-nextPage:
-  - comparison
-  - installation
----
-
-# Introduction
-Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
-
-Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons. 
-
-With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.
-
-When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.
-
-Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.
-
-Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
-
-Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
-

docs/icons/categorized.md

@@ -13,6 +13,6 @@ import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOvervie
 
 <div class="VPDoc content">
   <PageContainer>
-    <IconsCategoryOverview :categories="data.categories" :icon="data.icons" />
+    <IconsCategoryOverview :categories="data.categories" :icons="data.icons" />
   </PageContainer>
 </div>