diff --git a/.github/workflows/close-issue-with-banned-phrases.yml b/.github/workflows/close-issue-with-banned-phrases.yml index 90893860d..ea5116b7f 100644 --- a/.github/workflows/close-issue-with-banned-phrases.yml +++ b/.github/workflows/close-issue-with-banned-phrases.yml @@ -24,7 +24,7 @@ jobs: if echo "$ISSUE_TITLE" | grep -i "$PHRASE"; then gh issue close ${{ github.event.issue.number }} --reason "not planned" --comment "This looks like a duplicate, use the [search](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+$PHRASE) to find similar issues. - Read more about brand guideline rules at [We're not accepting new Brand icons #670](https://github.com/lucide-icons/lucide/issues/670). + Read [our official statement about brand logos in Lucide](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md). Always happy to help on [Discord](https://discord.gg/EH6nSts)." gh issue lock ${{ github.event.issue.number }} --reason spam diff --git a/.vscode/svg.code-snippets b/.vscode/svg.code-snippets index 52cbb23c1..dbf726e6b 100644 --- a/.vscode/svg.code-snippets +++ b/.vscode/svg.code-snippets @@ -1,4 +1,5 @@ { + "$schema": "https://raw.githubusercontent.com/Yash-Singh1/vscode-snippets-json-schema/main/schema.json", "Lucide SVG": { "scope": "xml", "description": "Base SVG with Lucide attributes.", @@ -51,6 +52,16 @@ ], "body": "" }, + "Squircle": { + "scope": "xml", + "description": "SVG `path` with Lucide defaults.", + "prefix": [ + "squircle", + "path", + "" + }, "Ellipse": { "scope": "xml", "description": "SVG `ellipse`.", diff --git a/categories/navigation.json b/categories/navigation.json index 0cb9e209d..86a3e5503 100644 --- a/categories/navigation.json +++ b/categories/navigation.json @@ -1,5 +1,5 @@ { "$schema": "../category.schema.json", - "title": "Navigation", + "title": "Navigation, Maps, and POIs", "icon": "compass" } diff --git a/docs/.vitepress/data/categoriesData.json b/docs/.vitepress/data/categoriesData.json index 8d6c3b1ab..03f5236bd 100644 --- a/docs/.vitepress/data/categoriesData.json +++ b/docs/.vitepress/data/categoriesData.json @@ -101,7 +101,7 @@ }, { "name": "navigation", - "title": "Navigation" + "title": "Navigation, Maps, and POIs" }, { "name": "notifications", diff --git a/docs/.vitepress/data/packageData.thirdParty.json b/docs/.vitepress/data/packageData.thirdParty.json index 3f3b40325..7da04af04 100644 --- a/docs/.vitepress/data/packageData.thirdParty.json +++ b/docs/.vitepress/data/packageData.thirdParty.json @@ -78,7 +78,7 @@ "documentation": "https://github.com/swisnl/nuxt-lucide-icons/blob/main/README.md" }, { - "name": "lucide-lustre", + "name": "lucide_lustre", "description": "A library providing https://lucide.dev icons to lustre.", "icon": "/framework-logos/lustre.webp", "shields": [ @@ -98,7 +98,7 @@ }, { "name": "lucide_icons_flutter", - "description": "A library providing https://lucide.dev icons to lustre.", + "description": "A library providing https://lucide.dev icons to Flutter.", "icon": "/framework-logos/flutter.svg", "shields": [ { @@ -114,5 +114,62 @@ ], "source": "https://github.com/vqh2602/lucide-flutter-main", "documentation": "https://pub.dev/documentation/lucide_icons_flutter/latest/" + }, + { + "name": "lucide-slint", + "description": "Implementation of the lucide icon library for Slint.", + "icon": "/framework-logos/slint.svg", + "shields": [ + { + "alt": "Latest Stable Version", + "src": "https://img.shields.io/crates/v/lucide-slint", + "href": "https://crates.io/crates/lucide-slint" + }, + { + "alt": "Total Downloads", + "src": "https://img.shields.io/crates/d/lucide-slint", + "href": "https://crates.io/crates/lucide-slint" + } + ], + "source": "https://github.com/cnlancehu/lucide-slint", + "documentation": "https://github.com/cnlancehu/lucide-slint/blob/main/README.md" + }, + { + "name": "lucide-go", + "description": "Implementation of Lucide icons for Go's html/template package.", + "icon": "/framework-logos/go.svg", + "shields": [ + { + "alt": "Latest Stable Version", + "src": "https://img.shields.io/github/v/release/kaugesaar/lucide-go", + "href": "https://github.com/kaugesaar/lucide-go/releases" + }, + { + "alt": "Go Reference", + "src": "https://pkg.go.dev/badge/github.com/kaugesaar/lucide-go.svg", + "href": "https://pkg.go.dev/github.com/kaugesaar/lucide-go" + } + ], + "source": "https://github.com/kaugesaar/lucide-go", + "documentation": "https://github.com/kaugesaar/lucide-go/blob/master/README.md" + }, + { + "name": "lucide-rails", + "description": "Ruby on Rails views helper method for rendering Lucide icons.", + "icon": "/framework-logos/rails.svg", + "shields": [ + { + "alt": "Latest Stable Version", + "src": "https://img.shields.io/gem/v/lucide-rails", + "href": "https://rubygems.org/gems/lucide-rails" + }, + { + "alt": "Total Downloads", + "src": "https://img.shields.io/gem/dt/lucide-rails", + "href": "https://rubygems.org/gems/lucide-rails" + } + ], + "source": "https://github.com/heyvito/lucide-rails", + "documentation": "https://github.com/heyvito/lucide-rails/blob/master/README.md" } -] \ No newline at end of file +] diff --git a/docs/.vitepress/theme/components/base/FakeInput.vue b/docs/.vitepress/theme/components/base/FakeInput.vue index 613a48aca..26a9380b1 100644 --- a/docs/.vitepress/theme/components/base/FakeInput.vue +++ b/docs/.vitepress/theme/components/base/FakeInput.vue @@ -3,12 +3,20 @@ import createLucideIcon from 'lucide-vue-next/src/createLucideIcon' import { search } from '../../../data/iconNodes' const SearchIcon = createLucideIcon('search', search) + +defineProps({ + shortcut: { + type: String, + required: false + } +}) @@ -33,4 +41,23 @@ const SearchIcon = createLucideIcon('search', search) border-color: var(--vp-c-brand); background: var(--vp-c-bg-alt); } + +.shortcut { + margin-left: auto; + padding: 2px 6px; + font-size: 12px; + font-family: inherit; + font-weight: 500; + line-height: 1.5; + color: var(--vp-c-text-3); + background: var(--vp-c-default-soft); + border: 1px solid var(--vp-c-divider); + border-radius: 4px; +} + +@media (hover: none) { + .shortcut { + display: none; + } +} diff --git a/docs/.vitepress/theme/components/base/Input.vue b/docs/.vitepress/theme/components/base/Input.vue index d624b265a..59b4fbfa3 100644 --- a/docs/.vitepress/theme/components/base/Input.vue +++ b/docs/.vitepress/theme/components/base/Input.vue @@ -6,20 +6,35 @@ export default { export interface InputProps { type: string modelValue: string + shortcut?: string } @@ -57,6 +73,10 @@ defineExpose({ font-size: 14px; } +.input.has-shortcut { + padding-right: calc(var(--shortcut-width, 40px) + 22px); +} + .input:hover, .input:focus { border-color: var(--vp-c-brand); background: var(--vp-c-bg-alt); @@ -66,7 +86,28 @@ defineExpose({ padding-left: 52px; } +.shortcut { + position: absolute; + right: 12px; + top: 50%; + transform: translateY(-50%); + padding: 2px 6px; + font-size: 12px; + font-family: inherit; + font-weight: 500; + line-height: 1.5; + color: var(--vp-c-text-3); + background: var(--vp-c-default-soft); + border: 1px solid var(--vp-c-divider); + border-radius: 4px; + pointer-events: none; +} +@media (hover: none) { + .shortcut { + display: none; + } +} diff --git a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue index 9471e815f..b3acb5f03 100644 --- a/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue +++ b/docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue @@ -5,10 +5,15 @@ import LucideIcon from '../base/LucideIcon.vue' import { useRouter } from 'vitepress'; import { random } from 'lodash-es' import FakeInput from '../base/FakeInput.vue' +import useSearchShortcut from '../../utils/useSearchShortcut' const { go } = useRouter() const intervalTime = shallowRef() +const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => { + go('/icons/?focus') +}) + const getInitialItems = () => data.icons.slice(0, 48) const items = ref(getInitialItems()) let id = items.value.length + 1 @@ -64,7 +69,11 @@ onBeforeUnmount(() => { - + Search {{ data.iconsCount }} icons... diff --git a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue index 4da3ab34a..355bc2685 100644 --- a/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue +++ b/docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue @@ -4,6 +4,7 @@ import type { IconEntity, Category } from '../../types'; import useSearch from '../../composables/useSearch'; import InputSearch from '../base/InputSearch.vue'; import useSearchInput from '../../composables/useSearchInput'; +import useSearchShortcut from '../../utils/useSearchShortcut'; import StickyBar from './StickyBar.vue'; import IconsCategory from './IconsCategory.vue'; import useFetchTags from '../../composables/useFetchTags'; @@ -27,6 +28,10 @@ const activeIconName = ref(null); const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput(); const isSearching = computed(() => !!searchQuery.value); +const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => { + searchInput.value?.focus(); +}); + function setActiveIconName(name: string) { activeIconName.value = name; } @@ -154,6 +159,7 @@ watchEffect(() => { -import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue'; +import { ref, computed, defineAsyncComponent, onMounted, onBeforeUnmount, watch } from 'vue'; import type { IconEntity } from '../../types'; import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core'; +import { useRoute } from 'vitepress'; import IconGrid from './IconGrid.vue'; import InputSearch from '../base/InputSearch.vue'; import useSearch from '../../composables/useSearch'; import useSearchInput from '../../composables/useSearchInput'; +import useSearchShortcut from '../../utils/useSearchShortcut'; import StickyBar from './StickyBar.vue'; import useFetchTags from '../../composables/useFetchTags'; import useFetchCategories from '../../composables/useFetchCategories'; @@ -58,6 +60,11 @@ const mappedIcons = computed(() => { }); const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput(); + +const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => { + searchInput.value?.focus(); +}); + const searchResults = useSearch(searchQueryDebounced, mappedIcons, [ { name: 'name', weight: 3 }, { name: 'aliases', weight: 3 }, @@ -80,8 +87,13 @@ const { list, containerProps, wrapperProps, scrollTo } = useVirtualList( onMounted(() => { containerProps.ref.value = document.documentElement; useEventListener(window, 'scroll', containerProps.onScroll) -}) + // Check if we should focus the search input from URL parameter + const route = useRoute() + if (route.data?.relativePath && window.location.search.includes('focus')) { + searchInput.value?.focus() + } +}) function setActiveIconName(name: string) { activeIconName.value = name; @@ -118,6 +130,7 @@ function handleCloseDrawer() { :placeholder="`Search ${icons.length} icons ...`" v-model="searchQuery" ref="searchInput" + :shortcut="kbdSearchShortcut" class="input-wrapper" @focus="onFocusSearchInput" /> diff --git a/docs/.vitepress/theme/utils/useSearchShortcut.ts b/docs/.vitepress/theme/utils/useSearchShortcut.ts new file mode 100644 index 000000000..192ce782f --- /dev/null +++ b/docs/.vitepress/theme/utils/useSearchShortcut.ts @@ -0,0 +1,35 @@ +import { ref, onMounted, onBeforeUnmount } from 'vue'; + +/** + * Composable for handling search keyboard shortcuts. + * Listens for Cmd/Ctrl+K and "/" keys to trigger a search action. + * + * @param callback - Function to execute when shortcut is triggered + * @returns Object containing the platform-specific shortcut display text + */ +export default function useSearchShortcut(callback: () => void) { + const shortcutText = ref(''); + + function handleKeydown(event: KeyboardEvent) { + // Check for Cmd+K (Mac), Ctrl+K (Windows/Linux), or forward slash + if (((event.metaKey || event.ctrlKey) && event.key === 'k') || event.key === '/') { + event.preventDefault(); + callback(); + } + } + + onMounted(() => { + // Detect platform and set appropriate keyboard shortcut for search focus + const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); + shortcutText.value = isMac ? '⌘K' : 'Ctrl+K'; + + // Add keyboard shortcut listener + window.addEventListener('keydown', handleKeydown); + }); + + onBeforeUnmount(() => { + window.removeEventListener('keydown', handleKeydown); + }); + + return { shortcutText }; +} diff --git a/docs/guide/index.md b/docs/guide/index.md index b54d5bc9c..e079fcf5e 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -7,7 +7,7 @@ nextPage: # What is Lucide? -Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](/packages) to make it easier to use these icons in your project. +Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](/packages). ## Available Icons diff --git a/docs/guide/installation.md b/docs/guide/installation.md index 07774c7f2..fd8d935e8 100644 --- a/docs/guide/installation.md +++ b/docs/guide/installation.md @@ -11,7 +11,7 @@ Implementation of the lucide icon library for web applications. ::: code-group ```sh [pnpm] -pnpm install lucide +pnpm add lucide ``` ```sh [yarn] @@ -37,7 +37,7 @@ Implementation of the lucide icon library for React applications. ::: code-group ```sh [pnpm] -pnpm install lucide-react +pnpm add lucide-react ``` ```sh [yarn] @@ -64,7 +64,7 @@ Implementation of the lucide icon library for Vue applications. ::: code-group ```sh [pnpm] -pnpm install @lucide/vue +pnpm add @lucide/vue ``` ```sh [yarn] @@ -116,7 +116,7 @@ Implementation of the lucide icon library for Solid applications. ::: code-group ```sh [pnpm] -pnpm install lucide-solid +pnpm add lucide-solid ``` ```sh [yarn] @@ -142,7 +142,7 @@ Implementation of the lucide icon library for Angular applications. ::: code-group ```sh [pnpm] -pnpm install lucide-angular +pnpm add lucide-angular ``` ```sh [yarn] @@ -168,7 +168,7 @@ Implementation of the lucide icon library for preact applications. ::: code-group ```sh [pnpm] -pnpm install lucide-preact +pnpm add lucide-preact ``` ```sh [yarn] @@ -195,7 +195,7 @@ Implementation of the lucide icon library for Astro applications. ::: code-group ```sh [pnpm] -pnpm install @lucide/astro +pnpm add @lucide/astro ``` ```sh [yarn] @@ -221,7 +221,7 @@ Implementation of the lucide icon library for multiple usages that like to use: ::: code-group ```sh [pnpm] -pnpm install lucide-static +pnpm add lucide-static ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md index ec79eb40d..737ccc01f 100644 --- a/docs/guide/packages/lucide-angular.md +++ b/docs/guide/packages/lucide-angular.md @@ -1,13 +1,20 @@ # Lucide Angular -Implementation of the lucide icon library for Angular applications. +Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications. + +**What you can accomplish:** +- Use icons as Angular components with full dependency injection support +- Configure icons globally through Angular services and providers +- Choose from multiple component selectors (lucide-angular, lucide-icon, i-lucide, span-lucide) +- Integrate with Angular's reactive forms and data binding +- Build scalable applications with tree-shaken icon bundles and lazy loading support ## Installation ::: code-group ```sh [pnpm] -pnpm install lucide-angular +pnpm add lucide-angular ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-astro.md b/docs/guide/packages/lucide-astro.md index dc5e2bdc4..0ae1525d4 100644 --- a/docs/guide/packages/lucide-astro.md +++ b/docs/guide/packages/lucide-astro.md @@ -1,6 +1,13 @@ # Lucide Astro -Implementation of the lucide icon library for Astro applications. +Astro components for Lucide icons that work perfectly with Astro's island architecture and multi-framework support. Each icon is an Astro component that renders as an inline SVG, providing excellent performance for static sites and server-side rendering scenarios. + +**What you can accomplish:** +- Use icons as Astro components with zero JavaScript runtime overhead +- Build fast, static websites with optimized SVG icons +- Integrate seamlessly with Astro's component islands and partial hydration +- Create multi-framework applications where icons work across different UI libraries +- Optimize performance with direct icon imports and build-time rendering ## Installation diff --git a/docs/guide/packages/lucide-preact.md b/docs/guide/packages/lucide-preact.md index 4247c6abf..817acbdf1 100644 --- a/docs/guide/packages/lucide-preact.md +++ b/docs/guide/packages/lucide-preact.md @@ -4,14 +4,21 @@ title: Lucide Preact # Lucide Preact -Implementation of the lucide icon library for preact applications. +Preact components for Lucide icons that provide React-like development experience with a smaller footprint. Each icon is a lightweight Preact component that renders as an inline SVG, perfect for applications that need React compatibility with minimal bundle size. + +**What you can accomplish:** +- Use icons as Preact components with React-like syntax and patterns +- Build lightweight applications with Preact's smaller runtime +- Create fast, responsive interfaces with minimal JavaScript overhead +- Maintain React compatibility while reducing bundle size +- Integrate with existing Preact applications and component libraries ## Installation ::: code-group ```sh [pnpm] -pnpm install lucide-preact +pnpm add lucide-preact ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-react-native.md b/docs/guide/packages/lucide-react-native.md index 374090f7d..b7208292d 100644 --- a/docs/guide/packages/lucide-react-native.md +++ b/docs/guide/packages/lucide-react-native.md @@ -1,6 +1,13 @@ # Lucide React Native -Implementation of the lucide icon library for React Native applications +React Native components for Lucide icons that work seamlessly across iOS and Android platforms. Built on top of react-native-svg, each icon renders as a native SVG component, providing consistent visual appearance and performance across mobile devices. + +**What you can accomplish:** +- Use icons as React Native components with platform-consistent rendering +- Build cross-platform mobile apps with scalable vector icons +- Create responsive interfaces that adapt to different screen densities +- Integrate with React Native's styling system and animation libraries +- Maintain consistent icon appearance across iOS and Android platforms ## Installation @@ -9,7 +16,7 @@ First, ensure that you have `react-native-svg` (version between 12 and 15) insta ::: code-group ```sh [pnpm] -pnpm install lucide-react-native +pnpm add lucide-react-native ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md index fb57d5b63..ac34ba186 100644 --- a/docs/guide/packages/lucide-react.md +++ b/docs/guide/packages/lucide-react.md @@ -1,13 +1,20 @@ # Lucide React -Implementation of the lucide icon library for react applications +React components for Lucide icons that integrate seamlessly into your React applications. Each icon is a fully-typed React component that renders as an optimized inline SVG, giving you the flexibility of components with the performance of vector graphics. + +**What you can accomplish:** +- Import icons as React components with full TypeScript support +- Pass props to customize size, color, stroke width, and other SVG attributes +- Use icons in JSX with the same ease as any other React component +- Benefit from automatic tree-shaking to include only the icons you use +- Create dynamic icon components that respond to state and user interactions ## Installation ::: code-group ```sh [pnpm] -pnpm install lucide-react +pnpm add lucide-react ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md index c56d2851c..5f76d4fc3 100644 --- a/docs/guide/packages/lucide-solid.md +++ b/docs/guide/packages/lucide-solid.md @@ -1,13 +1,20 @@ # Lucide Solid -Implementation of the lucide icon library for solid applications. +SolidJS components for Lucide icons that leverage Solid's fine-grained reactivity system. Each icon is a reactive Solid component that renders as an inline SVG, providing exceptional performance through Solid's compile-time optimizations and reactive primitives. + +**What you can accomplish:** +- Use icons as SolidJS components with fine-grained reactivity +- Create highly performant interfaces with Solid's reactive system +- Build dynamic icon components that respond to signals and stores +- Integrate seamlessly with Solid's JSX and component patterns +- Optimize performance with direct icon imports and minimal runtime overhead ## Installation ::: code-group ```sh [pnpm] -pnpm install lucide-solid +pnpm add lucide-solid ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-static.md b/docs/guide/packages/lucide-static.md index f1a1f27fc..d2752696e 100644 --- a/docs/guide/packages/lucide-static.md +++ b/docs/guide/packages/lucide-static.md @@ -1,5 +1,14 @@ # Lucide Static +Static assets and utilities for Lucide icons that work without JavaScript frameworks. This package provides multiple formats including individual SVG files, SVG sprites, icon fonts, and Node.js utilities for server-side rendering and static site generation. + +**What you can accomplish:** +- Use individual SVG files as images or CSS background images +- Implement icon fonts for CSS-based icon systems +- Create SVG sprites for efficient icon loading in static sites +- Import SVG strings in Node.js applications and server-side rendering +- Build static websites and applications without JavaScript framework dependencies + This package includes the following implementations of Lucide icons: - Individual SVG files @@ -29,7 +38,7 @@ For production environments, we recommend using a bundler with tree-shaking supp ::: code-group ```sh [pnpm] -pnpm install lucide-static +pnpm add lucide-static ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide-svelte.md b/docs/guide/packages/lucide-svelte.md index d681c533b..eebe1ebac 100644 --- a/docs/guide/packages/lucide-svelte.md +++ b/docs/guide/packages/lucide-svelte.md @@ -1,6 +1,13 @@ # Lucide Svelte -Implementation of the lucide icon library for svelte applications. +Svelte components for Lucide icons that work seamlessly with both Svelte 4 and Svelte 5. Each icon is a reactive Svelte component that renders as an inline SVG, providing excellent performance and integration with Svelte's reactive system and modern features. + +**What you can accomplish:** +- Use icons as Svelte components with full reactivity and TypeScript support +- Bind icon properties to reactive variables and stores +- Create dynamic icon systems that respond to application state +- Build type-safe interfaces with comprehensive TypeScript definitions +- Optimize bundle sizes with direct icon imports and tree-shaking ## Installation diff --git a/docs/guide/packages/lucide-vue.md b/docs/guide/packages/lucide-vue.md index a984d82d1..f2758012e 100644 --- a/docs/guide/packages/lucide-vue.md +++ b/docs/guide/packages/lucide-vue.md @@ -1,13 +1,20 @@ # Lucide Vue -Implementation of the lucide icon library for Vue applications. +Vue 2 components for Lucide icons that integrate with Vue's Options API and template system. Each icon is a Vue component that renders as an inline SVG, providing familiar Vue development patterns for legacy applications still using Vue 2. + +**What you can accomplish:** +- Use icons as Vue 2 components with Options API integration +- Maintain legacy Vue 2 applications with modern icon components +- Integrate with Vue 2's template system and component lifecycle +- Build applications using Vue 2's familiar syntax and patterns +- Bridge the gap while planning migration to Vue 3 ## Installation ::: code-group ```sh [pnpm] -pnpm install @lucide/vue +pnpm add @lucide/vue ``` ```sh [yarn] diff --git a/docs/guide/packages/lucide.md b/docs/guide/packages/lucide.md index 5c64db4d2..5125865e2 100644 --- a/docs/guide/packages/lucide.md +++ b/docs/guide/packages/lucide.md @@ -1,6 +1,13 @@ # Lucide -Implementation of the lucide icon library for web applications. +The core Lucide package for vanilla JavaScript applications. This package allows you to easily add scalable vector icons to any web project without framework dependencies. Perfect for static websites, legacy applications, or when you need lightweight icon integration with maximum browser compatibility. + +**What you can accomplish:** +- Add icons to HTML using simple data attributes +- Dynamically create and insert SVG icons with JavaScript +- Customize icon appearance with CSS classes and inline styles +- Tree-shake unused icons to keep bundle sizes minimal +- Use icons in any JavaScript environment or plain HTML ## Installation @@ -9,7 +16,7 @@ Implementation of the lucide icon library for web applications. ::: code-group ```sh [pnpm] -pnpm install lucide +pnpm add lucide ``` ```sh [yarn] @@ -93,6 +100,7 @@ In the `createIcons` function you can pass some extra parameters: - you can pass `nameAttr` to adjust the attribute name to replace for - you can pass `attrs` to pass additional custom attributes, for instance CSS classes or stroke options. - you can pass `root` to provide a custom DOM element the icons should be replaced in (useful when manipulating small sections of a large DOM or elements in the shadow DOM) +- you can pass `inTemplates: true` to also replace icons inside `