Adjust imports

docs/.env.example

@@ -1,4 +1,4 @@
-# Copy to `docs/.env`. Every variable is optional.
+# Copy to `docs/.env`.
 
 # Icon popularity from Plausible. Defaults to 0 for every icon when unset.
 LUCIDE_ANALYTICS_TOKEN=
@@ -6,9 +6,8 @@ LUCIDE_ANALYTICS_TOKEN=
 # Set to `true` to also show icons that are not released yet.
 VITE_SHOW_AWAITING_RELEASE=
 
-# Client-side Algolia icon search (public search-only key).
-# Overrides the defaults in docs/.vitepress/theme/utils/algolia.ts,
-# e.g. to point the site at another index. The index is filled by the Algolia crawler.
-VITE_ALGOLIA_APP_ID=
-VITE_ALGOLIA_SEARCH_API_KEY=
-VITE_ALGOLIA_INDEX_NAME=
+# Client-side Algolia icon search (public search-only key). Required for the icon search.
+# The index is filled by the Algolia crawler.
+VITE_ALGOLIA_APP_ID=R7KKMCPXOB
+VITE_ALGOLIA_SEARCH_API_KEY=dd3101054267d35fb28f49c42715f1aa
+VITE_ALGOLIA_INDEX_NAME=icons

docs/.vitepress/config.ts

@@ -10,7 +10,7 @@ import { resourcesSidebar } from './sidebar/resources';
 import llmstxt from 'vitepress-plugin-llms';
 import { transformPageData } from './transformPageData';
 import getHeadConfig from './getHeadConfig';
-import { ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY } from './theme/utils/algolia';
+import { loadEnv } from 'vitepress';
 
 const defaultSandpackCSS = await readFile(
   fileURLToPath(new URL('./theme/sandpack-default.css', import.meta.url)),
@@ -25,6 +25,9 @@ const title = 'Lucide';
 const socialTitle = 'Lucide Icons';
 const description = 'Beautiful & consistent icon toolkit made by the community.';
 
+
+const env = loadEnv(process.env.NODE_ENV, process.cwd());
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title,
@@ -135,8 +138,8 @@ export default defineConfig({
     search: {
       provider: 'algolia',
       options: {
-        appId: ALGOLIA_APP_ID,
-        apiKey: ALGOLIA_SEARCH_API_KEY,
+        appId: env.VITE_ALGOLIA_APP_ID,
+        apiKey: env.VITE_ALGOLIA_SEARCH_API_KEY,
         indexName: 'lucide',
       },
     },

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -2,7 +2,7 @@
 import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue';
 import type { IconEntity } from '../../types';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
-import { useRoute } from 'vitepress';
+import { DefaultTheme, useData, useRoute } from 'vitepress';
 import IconGrid from './IconGrid.vue';
 import Select from '../base/Select.vue';
 import InputSearch from '../base/InputSearch.vue';
@@ -48,6 +48,9 @@ const props = defineProps<{
   icons: IconEntity[];
 }>();
 
+const { theme } = useData<DefaultTheme.Config>()
+  const algoliaSearchOptions = theme.value.search?.options as DefaultTheme.AlgoliaSearchOptions;
+
 const activeIconName = ref(null);
 const selectedSort = ref(SORTING[0]);
 
@@ -69,6 +72,7 @@ const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
 const { results: searchResults, isPending: isSearchPending } = useIconSearch(
   searchQueryDebounced,
   sortedIcons,
+  algoliaSearchOptions,
 );
 
 // While searching, "Popularity" keeps Algolia's relevance order.
@@ -145,7 +149,7 @@ function handleCloseDrawer() {
         ref="searchInput"
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
-        @focus="prefetchAlgoliaClient"
+        @focus="() =>prefetchAlgoliaClient(algoliaSearchOptions)"
       />
 
       <Select

docs/.vitepress/theme/composables/useIconSearch.ts

@@ -1,5 +1,6 @@
 import { computed, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue';
 import { searchIconIds } from '../utils/algolia';
+import { DefaultTheme, useData } from 'vitepress';
 
 export interface SearchableIcon {
   name: string;
@@ -23,6 +24,7 @@ export interface UseIconSearchResult<T> {
 const useIconSearch = <T extends SearchableIcon>(
   query: Ref<string>,
   collection: Ref<T[]>,
+  algoliaSearchOptions: DefaultTheme.AlgoliaSearchOptions,
 ): UseIconSearchResult<T> => {
   const byId = computed(() => new Map(collection.value.map((icon) => [entityId(icon), icon])));
 
@@ -43,7 +45,7 @@ const useIconSearch = <T extends SearchableIcon>(
       isPending.value = true;
 
       try {
-        const ids = await searchIconIds(searchQuery);
+        const ids = await searchIconIds(searchQuery, algoliaSearchOptions);
 
         if (seq === requestSeq) {
           hitIds.value = ids;

docs/.vitepress/theme/utils/algolia.ts

@@ -1,7 +1,6 @@
 import type { LiteClient } from 'algoliasearch/lite';
+import { DefaultTheme, useData } from 'vitepress';
 
-export const ALGOLIA_APP_ID = 'R7KKMCPXOB';
-export const ALGOLIA_SEARCH_API_KEY = 'dd3101054267d35fb28f49c42715f1aa'; // public key.
 /**
  * The index caps retrievable hits at 1000 per query (`paginationLimitedTo`),
  * so a single page of this size is the most we can ever get back.
@@ -10,13 +9,17 @@ const HITS_PER_PAGE = 1000;
 
 let clientPromise: Promise<LiteClient> | undefined;
 
+
+
 /**
  * Lazily loads the Algolia lite client so it stays out of the initial page bundle.
  * Call it on search input focus to prefetch before the first keystroke.
  */
-export function getAlgoliaClient(): Promise<LiteClient> {
+export function getAlgoliaClient(algoliaSearchOptions: DefaultTheme.AlgoliaSearchOptions): Promise<LiteClient> {
   clientPromise ??= import('algoliasearch/lite')
-    .then(({ liteClient }) => liteClient(ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY))
+    .then(({ liteClient }) =>
+      liteClient(algoliaSearchOptions.appId, algoliaSearchOptions.apiKey),
+    )
     .catch((error) => {
       // Allow a retry on the next call instead of caching the failure.
       clientPromise = undefined;
@@ -26,8 +29,8 @@ export function getAlgoliaClient(): Promise<LiteClient> {
   return clientPromise;
 }
 
-export function prefetchAlgoliaClient() {
-  getAlgoliaClient().catch(() => {
+export function prefetchAlgoliaClient(algoliaSearchOptions: DefaultTheme.AlgoliaSearchOptions) {
+  getAlgoliaClient(algoliaSearchOptions).catch(() => {
     // Ignored here, the actual search reports errors.
   });
 }
@@ -38,14 +41,14 @@ const cache = new Map<string, string[]>();
  * Searches the icon index and returns the matching `objectID`s in relevance order.
  * Core icons use their name as `objectID`, lab icons use `lab/<name>`.
  */
-export async function searchIconIds(query: string): Promise<string[]> {
+export async function searchIconIds(query: string, algoliaSearchOptions: DefaultTheme.AlgoliaSearchOptions): Promise<string[]> {
   const cached = cache.get(query);
 
   if (cached) {
     return cached;
   }
 
-  const client = await getAlgoliaClient();
+  const client = await getAlgoliaClient(algoliaSearchOptions);
   const {
     results: [result],
   } = await client.searchForHits<{ objectID: string }>({

docs/.vitepress/types.d.ts

@@ -35,11 +35,11 @@ declare global {
   // Defined by VitePress at build time, used by its VPDocAsideCarbonAds component
   const __CARBON__: boolean;
 
-  // Optional overrides for the Algolia icon search, see docs/.env.example
+  // Algolia icon search, see docs/.env.example
   interface ImportMetaEnv {
-    readonly VITE_ALGOLIA_APP_ID?: string;
-    readonly VITE_ALGOLIA_SEARCH_API_KEY?: string;
-    readonly VITE_ALGOLIA_INDEX_NAME?: string;
+    readonly VITE_ALGOLIA_APP_ID: string;
+    readonly VITE_ALGOLIA_SEARCH_API_KEY: string;
+    readonly VITE_ALGOLIA_INDEX_NAME: string;
   }
 
   interface Window {