diff --git a/docs/.vitepress/components/IconsCategoryOverview.vue b/docs/.vitepress/components/IconsCategoryOverview.vue index 9b9b457af..af2456319 100644 --- a/docs/.vitepress/components/IconsCategoryOverview.vue +++ b/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) +) + - diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 089bafcd4..d364bcc9a 100644 --- a/docs/.vitepress/config.ts +++ b/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' } ] }, diff --git a/docs/guide/index.md b/docs/guide/index.md index cc3301821..89a1a2347 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -1 +1,22 @@ -# Docs \ No newline at end of file +--- +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). + diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md deleted file mode 100644 index 89a1a2347..000000000 --- a/docs/guide/introduction.md +++ /dev/null @@ -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). - diff --git a/docs/icons/categorized.md b/docs/icons/categorized.md index cc93f2c62..de2530533 100644 --- a/docs/icons/categorized.md +++ b/docs/icons/categorized.md @@ -13,6 +13,6 @@ import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOvervie
- +